Starcounter 2.1: Now compatible with Polymer 1.1

October 1, 2015 1:08 pm Published by Leave your thoughts

TL;DR: Today we released Starcounter 2.1, which brings compatibility with Polymer 1.1. This is one of the two breaking changes in this release. The other one was described in the blog post Starcounter 2.1: Breaking changes for app composition.

Starcounter’s /sys/ directory was updated to use Polymer 1.1.3 and other Custom Elements working with Polymer > 1. So, in case you have used Polymer 0.5 elements, make sure to migrate them as well.

Polymer upgrade is one out of two major changes in Starcounter 2.1, list of more server-side related changes was published before


The base set of Custom Elements, suggested by Starcounter to boost development of apps, like <starcounter-include>, <imported-template>, <puppet-client>, are now Polymer independent.
You can now make an app fully Starcounter-way, without a need to load any specific framework.

Thanks to dependency removal we are not only support pure HTML/JavaScript usage, but it makes us fully compatible with Polymer 1.1 :tada:

You can still build you apps like before. However if you have used Polymer, or Polymer’s template binding in your pages or partials, now, you need to do it explicitly (Yey! even more declarative code)

Pages with Polymer

If previously your code looked like:

<template bind id="tpl">
    <template is="imported-template" content="{{Page.Html}}" bind="{{Page}}"></template>
    <!-- or -->
    <starcounter-include partial="{{Page}}"></starcounter-include>
</template>
<puppet-client ref="tpl"></puppet-client>

Now it should look like

<link rel="import" href="/sys/polymer/polymer.html" />
<!-- .. -->
<template is="dom-bind" id="tpl">
    <template is="imported-template" content$="{{Page.Html}}" model="{{Page}}"></template>
    <!-- or -->
    <starcounter-include partial="{{Page}}"></starcounter-include>
</template>
<puppet-client ref="tpl"></puppet-client>

Partials with Polymer

If previously your code looked like:

<!-- some html imports, scripts, etc., then: -->
<template>
    <h1>Hello <strong>{{name}}</strong></h1>
</template>

Now, it should look like

<!-- make sure you have all dependencies, in case of being loaded from other app
 No worries, it will not be loaded twice -->
<link rel="import" href="/sys/polymer/polymer.html" />
<!-- some html imports, scripts, etc., then: -->
<template>
    <template is="dom-bind">
        <h1>Hello <strong>{{model.name}}</strong></h1>
    </template>
</template>

Due to Polymer template engine change, changes to model are not observed automatically. Therefore you need to either bound data manually following Polymer’s notification protocol, or use <dom-bind-notifier> custom element to do it for you:

<!-- make sure you have all dependencies, in case of being loaded from other app -->
<link rel="import" href="/sys/polymer/polymer.html" />
<link rel="import" href="/sys/dom-bind-notifier/dom-bind-notifier.html" />
<!-- some html imports, scripts, etc., then: -->
<template>
    <template is="dom-bind">
        <h1>Hello <input value="{{model.name}}"/></h1>
        <dom-bind-notifier observed-object="{{model}}" path="model"></dom-bind-notifier>
    </template>
</template>

Partials with plain JavaScript

As we are now totally framework agnostic, you can use data-model provided just as a regular JS object (model property attached to each child node of template)

<!-- some html imports, scripts, etc. -->
<template>
    <h1>Welcome</h1>
    <script>
        var model = document.currentScript.model;
        document.currentScript.previousElementSibling.innerHTML = "Hello" + model.name;
    </script>
</template>

More details

You can also refer to our docs:
Partials +more
Example of browser paghe
– and follow the tutorials 1 to 3

Naturally you can also check our sample apps’ code on GitHub

Categorised in:

This post was written by Tomek Wytrebowicz

Leave a Reply

Your email address will not be published. Required fields are marked *