JSL is yet another templating framework, inspired by XSL, and the contemporary trend of using JSON data which are transformed to HTML either on the client-side or the server-side. The fundamendal concept is to exploit the powerful modern JavaScript engines in an efficient way to write templates with a minimal footprint.

From JSL's point of view native JavaScript has quite accomodating semantincs for a native template engine.

Consider a function DIV(arg1...argN) that concatenates its arguments into a string and wraps it with the HTML tags <div> and </div>. Now consider the same for all known HTML elements...

Consider also a function jsl.transform that writes HTML source to a stream or DOMNode

What would you expect the following script to do?

Check in the following sections for a detailed explanation on how the arguments are treated depending on their types.

The values of the object properties whose property-name is an integer string, are treated as normal arguments.

The named properties of an object passed as argument to a tag-function, are converted to HTML attributes. The name of the property determines the attribute's name, and the value of the property determines the attributes's value.

Properties that are found in multiple object arguments, are concatenated.

The && and || operators actually return the value of one of the specified operands. So if these operators are used with non-Boolean values, they may return a non-Boolean value. To force a property to generate a Boolean Attribute, the property value has to be typecast to Boolean.

In this example the expression (a&&b) evaluates to 0. We are using double negation to make sure that it evaluates as a Boolean.

When the property name is data-* the property value(including arrays) is converted to a JSON string attribute.

In all other cases the string representation of the property value is used as attribute value⁽¹⁾⁽²⁾.

⁽¹⁾when the property name is style, property values are handled differently.

⁽²⁾when the property value is an Array, its items are concatenated using white-space as separator.

• Primitive values are converted to strings and are treated as if they are correct style definitions.
• Object values are treated as if they are CSS style declarations. The properties of the object, become CSS properties. You can use the camel case property notation or the css property name notation. In the example below, fontSize corresponds to the CSS property font-size

The helper function jsl.forEach iterates⁽¹⁾ through the properties of the object provided as first argument and passes them to a callback function as below:

• Before the document is loaded,jsl.transform appends its fragment to the end of the document using document.write().
• After the document is loaded, jsl.transform by default inserts its fragment before the end of the document body.
• The function can be bound using call or apply to a CSS selector string or DOM Node object as this context to define the target where the results should be appended.
• Alternativelly, the jsl.target property can be used to define the target context.

⁽¹⁾The function has slightly different usage on the server-side.

⁽²⁾in this example, before the invokation, the target of jsl.transform was set via the jsl helper property jsl.target to the panel on the right.

You can set the jsl.target to a response or any object that has a method write before calling jsl.transform

or you can invoke jsl.transform using call or apply binding its 'this' to a response or any object that has a method write

Calls to jsl.listener have the following format:

jsl.listener(buildTime1...,buildTime1N,function(event,runTime1,...runTime1N){
	...
})

Consider the following example and compare how the even figures versus the odd ones generate the onclick event handler. Notice how the even figures generate the onclick event handler using jsl.listener as follows:

onclick: jsl.listener(item,function(event,person){
		...
})

For a similar method suitable for generating javascript in <script> tags see also jsl.javascript

JSL is using jsl.listener internally when function properties of object arguments are processed.

• If the first multiline comment starts with a single '*' the comment contents are treated as text. Thus the apearence of < is escaped with the sequence &lt;
• If the first multiline comment starts with a double '**' the comment contents are treated as html.

• primitive arguments are expected to be valid CSS style rules.
• function arguments are evaluated repeativelly until they yield a non function
• object arguments, excluding arrays, are treated as if each property of the argument defines a CSS style rule.
  • the property name defines the CSS selector
  • the property value defines the CSS style declaration of the rule as in the case of style
• array arguments, the array items are evaluated with the above rules and their results are merged

If the first argument(case) is a Number,Boolean,or a String value, and its second argument an object(cases) then it returns the property of the object cases with property name == case. If no such property exists, and cases has a property named default then jsl.choose will return the default property. Notice that this behavior can be written in pure javascript quite efficiently with javascript expressions, yet JSL provides it for aesthetic reasons.

If the arguments don't match the criteria above, jsl.choose returns its first non void argument

Notice that in all cases the return values are evaluated whether there is a match or not. This may have both performance implications, and lead to unintented errors. So it is strongly recommended to return prefabricated functions/objects, or even avoid jsl.choose.

Notice that this behavior can be written in pure javascript quite efficiently with javascript expressions, using the test?trueResult:falseResult. yet JSL provides it for aesthetic reasons, and because quite often the falseResult is omitted.

Please notice that in JavaScript all the arguments of a function are evaluated before the source of a function is executed. Therefore, jsl.when(false,TAKE_THE_RED_PILL(),TAKE_THE_BLUE_PILL()), will first call both functions and then return the result of the second.

see also jsl.choose for a relevant function.

jsl.defs containst the names of the tags with a corresponding JSL tag-function, and a flag indicating whether they are singletons⁽¹⁾.

⁽¹⁾singleton tags, e.g. <br/> don't have a closing tag

jsl.target can be used to define the target Node of jsl.transform. It can be set to any valid css selector, or to a Node instance. Alternativelly, jsl.transform can be called with call or apply to define its target node.

registers a new tag tagName as a JSL tag-function

singleton is optional, by default false

namespace is an optional object where the new functions will be registered;
by default is the same namespace as with all the rest tag-functions

jsl.options define the performance and code-styling configuration of JSL. The following script generates a list of the current configuration, and the alternative settings:

<script src="jsl2.js?optimize=no&release=yes></ script>

JSL is pure javascript, its tag-functions are pure javascript functions, and accordingly JSL templates are also pure javascript functions.

We will be binding the template PERSON to the object customStyle. During execution, the PERSON's 'this' will refer to customStyle. In its declaration, the PERSON passes its 'this' binding as an argument to the FIGURE tag-function.

The rest is JSL magic

The content you see is generated using a JSL module on the server-side(nodejs).

The execution of the examples, and the DOM tree generation is performed on the browser.