ist.js v0.6.6 - Small new features

I just released ist.js version 0.6.6, which adds two new features (one of which was actually added in 0.6.5 but I didn't write a post about it).

The first one enables defining global variables or helpers that will be available anywhere in templates:

ist.global("myHelper", function(value) {
    return "helped value: " + value;
});

ist.global("myValue", 42);

div
    /* Renders to "helped value: hi!" */
    "{{ myHelper('hi!') }}"

    /* Renders to "42" */
    "{{ myValue }}"

Note that context variables with the same name as global variables will take precedence, as you're used to in Javascript.

The second features enable escaping newlines with a backslash to make long selectors more readable. All spaces/tabs before the backslash and on the beginning of the following line will be ignored. Take care not to leave spaces after the escaping backslash.

div.class#id[data-one={{ one }}][data-two={{ two }}] \
    [data-three={{ three }}][data-four={{four }}] \
            [data-five={{ five }}][data-six={{ six }}]

ist.js v0.6.4 - IE11- and Safari-compatible

As of version 0.6.4, ist.js is now compatible with IE11 and Safari 6 (actually it worked with version 0.6.3, but the test suite had bugs that prevented it to succeed with those browsers).

ist.js v0.6.3

I just released ist.js version 0.6.3. This release does not introduce any new feature, but ist.js is now tested thoroughly with multiple browsers on multiple platforms using Travis and Sauce Labs. For now, only Chrome, Firefox and Opera are tested but I plan to add IE, Safari, iOS and Android support soon. About IE, I'm not sure which versions to support yet, but my goal is to support at least IE10, even maybe IE9 (it seems IE8 would be too much work, but it is not completely excluded yet).

Under the hood, ist.js now uses PEGjs version 0.8.0, which should speed up template parsing and also allows size optimization, thus I may release size-optimized versions in the near future.

I also fixed a small inconsistency where rendering text nodes with undefined content would not have the same result on different browsers.

ist.js v0.6.1 bugfix release

I just released ist.js 0.6.1, which fixes problems when building projects that use ist!path/to/template dependencies with r.js.

Additionnaly, ist.js now uses Karma as a testing framework. All tests have been adapted to Karma and I added a bunch of new tests (including r.js build tests). Karma is a very nice framework, which is able to serve files on a webserver and automatically launch web browsers (including PhantomJS for example) to run test suites. It also paves the way to setting up continuous integration for ist.js.

Also, the download links on the home page have been fixed to point to the correct path on github.

ist.js v0.6 can finally update nodes !

After having rewritten the template renderer 3 times, ist.js is finally able to update rendered nodes. I settled on an approach that is MUCH simpler that anything I had attempted before, and that just works (I guess taking a break from ist.js for several months also helped).

Fragments returned from a template render() method now have an additional update() method to update rendering, so you must keep a reference on those fragments to be able to update them (even if you called somenode.appendChild(fragment), and as a consequence the fragment itself is now empty).

Here is a quick example:

var template = ist("div '{{ foo }}'"),
    rendered = template.render({ foo: "bar" });

document.body.appendChild(rendered);
// <div>bar</div>

// rendered is now empty, but it still holds the update() method !
rendered.update({ foo: "baz" });
// <div>baz</div>

You can call the update() method with a new context object, or without any arguments to reuse the same object as before.

Some methods have also been renamed in this version. The goal is to have short method names everywhere. Template#findPartial is now Template#partial, ist.fromScriptTag became ist.script and ist.createNode is now ist.create. The previous methods will still work for a few releases.

The syntax for directive helpers has changed a bit since 0.5.7, and they must be written a bit differently to cope with updating (as the same helper will be called for both rendering and updating). As always, refer to the documentation for more details and examples.

Finally, my apologies to people reading those news in a feed reader, as the last update caused all previous news posts to be seen as new (this was a consequence of moving urls to github.io).

ist.js v0.5.7 released

I just pushed a 0.5.7 release. I've been working quite a bit to prepare version 0.6 (which will mainly enable updating rendered templates), rewriting things many times, and I decided to do another release before 0.6 because of some already useful changes.

On a user's perspective, here is what changed in this version:

• New directives are available. @dom enables inserting DOM nodes when rendering:

@dom someNode

template.render({ someNode: document.createElement("div"); });

• You can now create reusable "components" using @define and @use:

@define "article"
    .article
        h1 "{{ title }}"
        "{{ text }}"

@each articles
    @use "article"

• Rendering performance has been boosted quite a lot (around 30% faster in my not-scientific-at-all benchmarks). This is actually a quite welcome side effect of rewriting things to enable template updating.

For people defining directive helpers, here is a summary of what changed; please refer to the documentation for more details.

• Directive helper definition has changed a bit to prepare ground for 0.6; helpers defined before 0.5.7 are incompatible. The two main changes are that rendered nodes are now to be inserted into a document-fragment passed as a parameter, and that the outer and inner context objects are now both "real" parameters (no more using this).
• The pushEvalVar and popEvalVar methods on rendering context objects have been deprecated in favor of new pushScope and popScope. They will be removed in version 0.6.

More changes have happened under the hood, see the changelog for more details.

ist.js v0.5.6 released

I have just pushed ist.js version 0.5.6 to GitHub. This version fixes a bug that prevented building (with r.js) projects when using the ist! requirejs plugin syntax.

I'm sorry for the lack of updates lately; I'm currently working on ist.js v0.6, which will allow updating rendered nodes with a new or modified context, introduce some new built-in helpers and enhance performance. I plan to add JSDoc to the code and rewrite tests to be more thorough, better organized and so that they can be automated (and hopefully get ist.js on a continuous integration server).

ist.js v0.5.5 released - new documentation online

I've been rewriting the documentation for a while and it is finally online. I think it is a lot clearer now, but do not hesitate to contact me if you have any remark or question.

Additionnaly, ist.js version 0.5.5 has just been released. Several bugs have been fixed (see the changelog for more details), rendering performance has been improved a bit and two new features are available. First, a new built-in @eachkey directive is available to enumerate objects. Here is an example of how to use it; more information is available in the documentation.

dl
    @eachkey myObject
        dt "{{ key }}"
        dd "{{ value }}"

The other new feature enables setting event handlers directly in templates. The syntax is close to attribute/property qualifiers; the main difference is that the value after the equal sign must be a valid ist.js expression (without curly braces), which should of course return a function. Say you have an array named menu in your rendering context object, where each item has a label property and an associated handler function named handler, you could use a template like this one:

ul#menu
    @each menu
        li[!click=handler] "{{ label }}"

I'm not entirely satisfied with this syntax; I could as well have used a new built-in directive but I still find the square brackets less clumsy. Naturally I'm open to feedback on this point.

ist.js v0.5.4 released

ist.js v0.5.4 has just been released. It now supports inline text nodes, so that the following are equivalent:

h1
    "My wonderful title"

h1 "My wonderful title"

New website

Welcome to the new website for ist.js. I'm still polishing things up a bit here, but overall it should be nearly fully functional. Make sure to try the online demo !

Don't hesitate to contact me it you have any problems (with ist.js or with this website) or suggestions, on twitter or using the GitHub issue tracker.

This website will adapt to smaller screens soon. I'm also going to rewrite the documentation as it needs to be organized better ; currently I think it's a bit confusing for newcomers.