PuppetJs library update

Within latest build of Starcounter we have released new version (1.0.1) of PuppetJs, and <puppet-client>. If you use <puppet-client> you will get some new features, but if you play with pure Puppet, you need to be aware of some breaking changes.

Separation

Starting from now PuppetJs is meant to be lightweight pure JS library for real-time JS object document collaboration over the network (HTTP, WebSockets). We plan to make it usable for both ends of p2p or client-server communication.

As PuppetJs may be used in headless/Node environment, therefore DOM features and browser integration was separated to PuppetDOM (src/puppet-dom.js)

Dummy migration

Both constructors are fully compatible, so if you do not like to change the way you used Puppet you can simply add additional

<script src="bower_components/src/puppet-dom.js"></script>

and rename in your code Puppet with PuppetDOM.

Multiple instances and binding context

Right now we also support multiple Puppet instances in the same document. You can now attach Puppet listeners to specific subtree of DOM by element attribute, and constructor parameter. With such feature you can bind two different remotes with different parts of DOM with two independent PuppetDOM instances.

If no element is specified PuppetDOM will behave like old Puppet and will listen to entire document.body.

Control listeners

Two new methods were provided for PuppetDOM: .listen() and .unlisten() – so you can toggle listening to DOM events, URL morphs, etc.

Note, that PuppetDOM DOM listening is separated from Puppet JSON observers

For more details read README.md for PuppetJS and PuppetDOM

<puppet-client>

If you use <puppet-client> you do not have to change a thing in your code.
However you can get more of it.

First of all you get PuppetDOM methods to .listen(), .unlisten() to DOM events.

Additionally with listen-to attribute you can specify a node to listen to (document.body is used as default), so you can use two <puppet-client> elements to bind two different remotes with separated parts of your HTML.

Categorised in: Nightly changes

This post was written by Tomek Wytrebowicz