jQuery pseudo web components based on UI widgets and Meteor Blaze reactive templates

The pourpose of this project is to be able to create jquery widgets using Meteor Blaze reactive templates from a self contained widget file.

The widget file can contain both the HTML template code and the widget script code. The file must be a valid HTML file and can contain the following top elements:

• template with the blaze templates data. Each tag found and add it to a template map variable which could be used later on by the widget.
• script with the jquery widget initialiation code
• link which will be added to the head of the host html page on load.

Dependencies

The genereated JS code requires jQuery, jQuery UI and the jQuery Meteor Blaze plugin

Install

npm install -g jquery-widget-compiler

Usage

jquery-widget-compiler [-i|--input widget.html] -o|--output widget.js

Example

Given the followinf example widget file:

<template name="main">
        Hello world!
        <button id="number-a">{{a}}</button> &times; <button id="number-b">{{b}}</button> = {{c}}
</template>
<script>
        jquery.widget("hello.world",{
                _create : function() {
                        var self = this;
                        this.a = query.Meteor.ReactiveVar(1);
                        this.b = query.Meteor.ReactiveVar(1);
                        this.element
                                .blaze(templates.main)
                                .reactive('a',this.a)
                                .reactive('b',this.b)
                                .helper('c',function() {
                                        return self.a.get()*self.b.get();
                                })
                                .render()
                                .on('click #number-a',function () {
                                        self.a.set(self.a.get() + 1);
                                }).
                                .on('click #number-b': function () {
                                        self.b.set(self.b.get() + 1);
                                });
        });
</script>

Just compile it by:

jquery-widget-compiler -i example/widget.html -o example/widget.js

It will generate the following javascript file:

module.exports = function(jquery) {
        //Links
        //Templates
        var Meteor = jquery.Meteor;
        var HTML = Meteor.HTML;
        var Blaze = Meteor.Blaze;
        var Spacebars = Meteor.Spacebars;
        var templates = {};
        templates['main'] = (function () { var view = this; return ["\n\tHello world!\n\t", HTML.BUTTON({id: "number-a"}, Blaze.View(function () { return Spacebars.mustache(view.lookup("a")); })), HTML.Raw(" × "), HTML.BUTTON({id: "number-b"}, Blaze.View(function () { return Spacebars.mustache(view.lookup("b")); })), " = ", Blaze.View(function () { return Spacebars.mustache(view.lookup("c")); }), "\n"]; });
        //Scripts

        jquery.widget("hello.world",{
                _create : function() {
                        var self = this;
                        this.a = jquery.Meteor.ReactiveVar(1);
                        this.b = jquery.Meteor.ReactiveVar(1);
                        this.element
                                .blaze(templates.main)
                                .reactive('a',this.a)
                                .reactive('b',this.b)
                                .helper('c',function() {
                                        return self.a.get()*self.b.get();
                                })
                                .render()
                                .on('click #number-a',function () {
                                        self.a.set(self.a.get() + 1);
                                }).
                                .on('click #number-b': function () {
                                        self.b.set(self.b.get() + 1);
                                });
        });
};

You can now require the js file in your code and use browserify to import it into your page.