PURE version 2 - Release notes

Key improvements of the version 2

• ~8k when packed (35% less)
• Plugin architecture. Extend PURE to fit your needs or use an existing plugin (ok, none available yet ;)
• No more inside eval / new Function(). Less possible side effects and improved compile response time.
• more verbose error checks for easier debugging of templates and directive
• Added support for dojo, Sly and standalone mode(dojo, domAssistant, jQuery, Mootools, Prototype, Sizzle and Sly are ok)
• All nested loops levels available within a function directive
• Nested directives makes the code more natural and easier to maintain
• And last but not least, a total code review (Thanks Rog Peppe for the jump in functional JS)

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 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])\])(\)?(\’|\")
  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.

What’s next?

New features will be implemented in version 2 only.
Only serious bugs will be corrected in version 1 if they occur.

In the coming weeks the wiki pages will be updated with a new documentation.
And the version2 branch will become the master branch.