Merge branch 'master' into complete-api-doc

build/grunt/config-checkStyle.js

@@ -33,6 +33,7 @@ module.exports = function (grunt) {
             files : {
                 src : [ 'docs/**/*.js',
                         '!docs/libs/**/*.js',
+                        '!docs/samples/**/*.spec.js',
                         '!docs/**/test/**/*.js' // the test for todomvc is in docs
                 ]
             },
@@ -60,7 +61,7 @@ module.exports = function (grunt) {
             }
         },
         test : {
-            src : ['test/**/*.js','docs/**/test/**/*.js'], // the test for todomvc is in docs
+            src : ['test/**/*.js', 'docs/samples/**/*.spec.js', 'docs/**/test/**/*.js'], // the test for todomvc is in docs
             options : {
                 "node" : true,
                 "globals" : {

build/grunt/docs.js

@@ -35,7 +35,10 @@ module.exports = function(grunt) {
         'playground/**/*.css',
         'playground/**/*.hsp'
       ],
-      DOCS_SAMPLES_GLOB = [ 'samples/**/*' ],
+      DOCS_SAMPLES_GLOB = [
+        'samples/**/*',
+        '!samples/**/*.spec.js'
+      ],
 
       DOCS_TODOMVC_INDEX          = 'todomvc/index.html',
       DOCS_TODOMVC_HSP_GLOB       = ['todomvc/**/*.hsp'],
@@ -406,7 +409,7 @@ module.exports = function(grunt) {
           process: function(content) {
             var compiled = renderer.renderString(content, "inline.js");
             if (compiled.serverErrors && compiled.serverErrors.length) {
-              grunt.fail.fatal("Hashspace compilation " + compiled.serverErrors[0].description);
+              grunt.fail.fatal("\r\nHashspace compilation of " + file + "\r\n" + compiled.serverErrors[0].description);
               return false;
             }
             return compiled.code;

docs/api/index.md

@@ -61,13 +61,13 @@ The returned object contains:
 
 #### Template definition
 
-Inside an `.hsp` file, you can define a template using `{template}` statement. A single `.hsp` can define multiple templates.
+Inside an `.hsp` file, you can define a template using `<template>` statement. A single `.hsp` can define multiple templates.
 
 ```cs
-{template tplname(arg1, arg2)}
+<template tplname(arg1, arg2)>
   //your template code goes here
   <div>Hello world</div>
-{/template}
+</template>
 ```
 
 A template has the following properties:
@@ -96,7 +96,7 @@ This statement is a block statement.
 Note that as a kind of alternative, in some cases a ternary expression can be used instead of the statement.
 
 ```cs
-{template example(context)}
+<template example(context)>
   Number is:
   {if context.number < 0}
     negative
@@ -106,7 +106,7 @@ Note that as a kind of alternative, in some cases a ternary expression can be us
     null
   {/if}
   &nbsp;({context.number === 0 ? 'null' : context.number}).
-{/template}
+</template>
 ```
 
 ---
@@ -120,13 +120,13 @@ This statement is a block statement.
 Note that the statement creates its own local environment containing the reference to the current value and possibly the one to the current index.
 
 ```cs
-{template example(array)}
+<template example(array)>
   <ul>
   {foreach index, value in array}
     <li onclick="{process(value)}">{index}: {value}</li>
   {/foreach}
   </ul>
-{/template}
+</template>
 ```
 
 ---
@@ -177,9 +177,9 @@ It will forward all the given parameters, and add its own metadata with the foll
 * `column`: the column number in which the statement appears on the line
 
 ```cs
-{template example()}
+<template example()>
   {log scope}
-{/template}
+</template>
 ```
 
 ---
@@ -202,7 +202,7 @@ The scope of the created variable is the container block in which the statement
 `{let}` statements __MUST__ appear at the beginning of the blocks in which they are used!
 
 ```hashspace
-{template example()}
+<template example()>
   {let tpl = "Variable in template environment"}
 
   <div>
@@ -220,12 +220,12 @@ The scope of the created variable is the container block in which the statement
   {foreach value in container}
     {let foreach_ = "Variable in foreach environment"}
   {/foreach}
-{/template}
+</template>
 ```
 
 ---
 
-#### Component template definitions `{template mycpt using ctrl:MyController}`
+#### Component template definitions `<template mycpt using ctrl:MyController>`
 
 Defines a component, that is a template tied to a specific _class_ to be used as controller.
 
@@ -246,7 +246,7 @@ The above means mainly two important things:
 * parameters of the template (equivalent of element attributes) are __passed by name__, not by position
 * it not only instantiates the template but also renders it automatically in a DOM element inserted exactly where the statement is used
 
-There is also an additional subtlety regarding the passing of the parameters. As said, they are passed by name, so if you use `<tplref arg1="..." />` for a template defined like this `{template(whatever, arg1)}`, `arg1` will be properly passed, wherever it is defined in the parameters list. However the actual subtlety resides in the __first__ parameter of the function: if it doesn't match any attribute name, it is not left `undefined` as one could think. Instead, it refers to an object built from the attribute/value pairs. In our little example, `whatever` would refer to an object like this: `{arg1: "..."}`. This is implicitely due to the internal way hashspace is managing components instantiation (components are discussed later in this documentation).
+There is also an additional subtlety regarding the passing of the parameters. As said, they are passed by name, so if you use `<tplref arg1="..." />` for a template defined like this `<template(whatever, arg1)>`, `arg1` will be properly passed, wherever it is defined in the parameters list. However the actual subtlety resides in the __first__ parameter of the function: if it doesn't match any attribute name, it is not left `undefined` as one could think. Instead, it refers to an object built from the attribute/value pairs. In our little example, `whatever` would refer to an object like this: `{arg1: "..."}`. This is implicitely due to the internal way hashspace is managing components instantiation (components are discussed later in this documentation).
 
 __Reference__:
 
@@ -331,7 +331,7 @@ The right one determines whether the result of the left one should be output or
 
 ---
 
-#### CSS expressions `class="{'urgent':msg.urgency, msg.category}"` or compound expressions
+#### CSS expressions `class="{msg.category} {{'urgent':msg.urgency}}"` or compound expressions
 
 You can combine several expressions into one expression statement using the comma; note that there is only one pair of braces which is for the compound expression, subexpressions being delimited by commas.
 
@@ -340,7 +340,7 @@ The results of the expressions will be concatenated with a single white space be
 Because of the space which always gets _inserted between the expressions_, it does not suit all use cases. However, this is perfect to define the `class` attribute of a HTML element for instance.
 
 ```cs
-<div class="{'urgent':msg.urgency, msg.category}"></div>
+<div class="{msg.category} {{'urgent':msg.urgency}}"></div>
 ```
 
 ## Modifiers
@@ -370,9 +370,9 @@ This means that instead of giving a piece of JavaScript code to be executed in t
 Event handlers have a particularity though: in your function call, you can pass the `event` object to your handler function. This `event` object is implicitly available in the context of your expression, but it is not automatically passed, so you need to explicitly pass it if you want to have it available in your function.
 
 ```cs
-{template example()}
+<template example()>
   <span onclick="{handler(event)}">Click me</span>
-{/template}
+</template>
 
 function handler(event) {
   // ...
@@ -549,14 +549,14 @@ Hashspace natively supports different types of attributes:
   ```
 
   ```cs
-  {template mycpt using ctrl:MyCpt}
+  <template mycpt using ctrl:MyCpt>
     <header>
       <#ctrl.header />
     </header>
     <section>
       <#ctrl.body />
     </section>
-  {/template}
+  </template>
   ```
 
   In terms of usage, it would be done with several different syntaxes:
@@ -713,13 +713,13 @@ var Controller = klass({
   }
 });
 
-{template example using controller:Controller}
+<template example using controller:Controller>
   <div>
     <span></span>
   </div>
   Ignored text
   <hr />
-{/template}
+</template>
 ```
 
 ---

docs/index.md

@@ -21,7 +21,7 @@ Hashspace turns static HTML pages into dynamic templates with the help of a few
 {if tasklist.length > 0}
   <ul>
   {foreach task in tasklist}
-    <li class="{'done': task.completed, 'ongoing': !task.completed}">
+    <li class="{{'done': task.completed, 'ongoing': !task.completed}}">
       {task.description}
     </li>
   {/foreach}

docs/playground/layout.hsp

@@ -1,3 +1,4 @@
+<script>
 var splitter = require("./splitter.hsp.js");
 var plunkerExport = require("./plunker.js");
 
@@ -28,8 +29,9 @@ var DescriptionCtrl = Class({
         this.after = parts[1];
     }
 });
+</script>
 
-{template desc using ctrl:DescriptionCtrl}
+<template desc using ctrl:DescriptionCtrl>
     <div id="description">
         {if ctrl.sample}
             <div class="before"></div>
@@ -40,13 +42,13 @@ var DescriptionCtrl = Class({
             <div class="after"></div>
         {/if}
     </div>
-{/template}
+</template>
 
 
-{export template mainLayout(data, playground)}
+<export template mainLayout(data, playground)>
     <#sampleList data="{data}" playground="{playground}"/>
 
-    <div class="{'hsp-sample', 'hsp-sample-full': data.navCollapsed}" onclick="{hideNavHover(event, data)}">
+    <div class="hsp-sample {{'hsp-sample-full': data.navCollapsed}}" onclick="{hideNavHover(event, data)}">
         <!--div class="actions">
             <a href="" title="Toggle code panel"><span class="icon icon-code icon-active"></span></a>
             <a href="" title="Toggle description panel"><span class="icon icon-preview icon-active"></span></a>
@@ -67,8 +69,9 @@ var DescriptionCtrl = Class({
             </div>
         </div>
     </div>
-{/template}
+</template>
 
+<script>
 function splitterReleased(position, data, playground) {
     data.splitterPos = position + "px";
     editorResize(playground);
@@ -100,9 +103,10 @@ function hideNavHover(event, data) {
         data.navHover = false;
     }
 }
+</script>
 
-{template sampleList(data, playground)}
-    <div class="{'samples-list', 'samples-list-collapsed': data.navCollapsed}"
+<template sampleList(data, playground)>
+    <div class="samples-list {{'samples-list-collapsed': data.navCollapsed}}"
         onclick="{hideNavHover(event, data)}">
 
         <a href="" class="collapse" title="{data.navCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}" onclick="{collapseNav(event, data, playground)}"><span class="icon"></span></a>
@@ -120,16 +124,16 @@ function hideNavHover(event, data) {
                 {if sample.category}
                     <div class="category">{sample.category}</div>
                 {else}
-                    <div class="{'item', 'selected': data.sampleIndex === index}">
+                    <div class="item {{'selected': data.sampleIndex === index}}">
                         <a href="{'#' + sample.folder}">{sample.title}</a>
                     </div>
                 {/if}
             {/foreach}
         </div>
     </div>
-{/template}
+</template>
 
-{export template errorList(errors)}
+<export template errorList(errors)>
     {if errors && errors.length}
         <div class="errorlist">
             <ul>
@@ -152,4 +156,4 @@ function hideNavHover(event, data) {
             </ul>
         </div>
     {/if}
-{/template}
+</template>

docs/playground/splitter.hsp

@@ -1,3 +1,4 @@
+<script>
 var Class = require("hsp/klass");
 
 var SplitterCtrl = Class({
@@ -71,11 +72,13 @@ var SplitterCtrl = Class({
         element.style[this.type === "vertical" ? "top" : "left"] = position + "px";
     }
 });
+</script>
 
-
-{template splitter using controller:SplitterCtrl}
+<template splitter using controller:SplitterCtrl>
     <div class="splitter" onmousedown="{controller.onMouseDown(event)}"></div>
-    <div class="{'splitter-proxy', 'splitter-proxy-hidden': !controller.active}"></div>
-{/template}
+    <div class="splitter-proxy {{'splitter-proxy-hidden': !controller.active}}"></div>
+</template>
 
+<script>
 module.exports = splitter;
+</script>

docs/samples/clickhandler/clickhandler.hsp

@@ -1,12 +1,15 @@
+<script>
 var msg={text:""}, count=-1;
+</script>
 
-{template message(msg)}
-    <div title="click me!" onclick="{changeMessage()}" class="noTextSelection">
-        {if msg.isWarning}<div class="warning">WARNING:&nbsp;</div>{/if}
-        {msg.text}
+<template message(msg)>
+    <div title="click me!" onclick="{changeMessage()}" onselectstart="return false">
+        {if msg.isWarning}<span class="warning">WARNING:&nbsp;</span>{/if}
+        <span>{msg.text}</span>
     </div>
-{/template}
+</template>
 
+<script>
 function changeMessage() {
     count++;
     switch(count%3) {
@@ -24,6 +27,9 @@ function changeMessage() {
     }
 }
 
+//export data to be available in test
+module.exports.msg = msg;
+
 // set a first message value
 changeMessage();
 
@@ -33,3 +39,4 @@ module.exports = {
     template: message,
     data: [msg]
 };
+</script>

docs/samples/clickhandler/clickhandler.spec.js

@@ -0,0 +1,32 @@
+var hashTester = require('hsp/utils/hashtester');
+var sample = require('./clickhandler.hsp');
+
+describe('"Simple event handler" sample', function () {
+
+    var h;
+    beforeEach(function () {
+        h = hashTester.newTestContext();
+        sample.template.apply(this, sample.data).render(h.container);
+    });
+
+    afterEach(function () {
+        h.$dispose();
+    });
+
+    it('should render initial state', function () {
+        expect(h('div').text()).to.equal('Click me to discover hashspace event handlers');
+    });
+
+    it('should cycle through messages on click', function () {
+        h('div').click();
+        expect(h('div > span').text()).to
+            .equal('Well done - you called the event handler and updated the data model in a row!');
+
+        h('div').click();
+        expect(h('div > span.warning').text()).to.match(/WARNING/);
+        expect(h('div > span:eq(1)').text()).to.equal('If you click again you will be back to first step!');
+
+        h('div').click();
+        expect(h('div > span').text()).to.equal('Click me to discover hashspace event handlers');
+    });
+});