Migrate from PURE v1 to v2

Non-backwards compatible changes

• no more getRuntime generation
• not fully compatible with the previous directive notation (old code will probably break)

How to upgrade your existing templates / directives

The upgrade can be a little boring but not traumatic. We have set ourselves as the ginea pigs for the upgrade and it took us an half hour to migrate our PURE based app with 50+ templates and directives.

Here below are the main issues you may face while upgrading.

Loops with autoRender

If the template is:

<ul><li></li></ul>

The following was working in version 1.

$('li').autoRender(data)

In version 2 the repeated node needs a parent, you need to use a parent as the template root.

$('ul').autoRender(data)

Loops with directive

A loop in version 1 was like:

'td': 'field <- fields',
'td input[value]': 'field.name'

The same loop in version 2 looks like:

'td':{
    'field <- fields':{
        'input[value]': 'field.name'
    }
}

As a side effect, you need to review your selectors within a loop as they are now nested.
As above, 'td.magnesiaField input[class]' becomes 'input[class]'

Another example in version 1:

'th': ['field <- fields', 'field']

Looks in version 2 like:

'th':{
    'field <- fields':{
        '.' : 'field'
    }
}

The '.' notation indicate the current node

Selector syntax change for attribute

In version 1, the notation to select an attribute was for instance 'a[href]' : ...

The new notation is 'a@href' : ...

For 2 reasons:

• the [...] notation is used in the W3C standard selector syntax and was then impossible to use in PURE
• it is now the same as the autoRender notation

Notes:

• Here is the regexp and the replacer string I used in my text editor to make the change to our app. HTH.
  find : (\[([^\]\n]+)\])(\+)?(\'|\") and replace by: @$2$3$4
• In a loop, to select an attribute of the current node, the syntax is : '.@href' : ...

The $p.compile function does not store anymore the compiled function

The following command:

myDiv.compile( 'templateName', directive )

Did compile and store a JS function in $p the object.

Then it was possible to re-use it by passing the name reference to the render function:

 myDiv.render( data, 'templateName' )

Now $p.compile returns the JS function that represent your compiled HTML.

You can then choose to store it the way you want, for instance:

var myTemplate = myDiv.compile( directive )

To re-use a compiled template you pass directly the function to render(...) and not anymore a template name.

 myDiv.render( data, myTemplate )

Watch the [class] attribute in your directive

There is no more leading space added automatically to the class attribute.

i.e: If we have an li element with a class class="my-list"

<li class="my-list"></li>

The directive:

'li[class]':function(arg){
    return arg.pos % 2 === 0 ? 'even' : 'odd';
}

Gives in version 1:

class="my-list odd"

And in version 2:

class="my-listodd"

The directive must be now:

'li[class]':function(arg){
    return arg.pos % 2 === 0 ? ' even' : ' odd';
}

The leading space needs to be set manually by the directive.