PHPackages                             pitana/pitana.js - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Framework](/categories/framework)
4. /
5. pitana/pitana.js

ActiveLibrary[Framework](/categories/framework)

pitana/pitana.js
================

pitana.js, framework for developing large scale modular JavaScript applications using Custom Elements

1.0.7(10y ago)02373MITJavaScript

Since Jun 7Pushed 8y ago2 watchersCompare

[ Source](https://github.com/jqgeeks/pitana.js)[ Packagist](https://packagist.org/packages/pitana/pitana.js)[ RSS](/packages/pitana-pitanajs/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependencies (1)Versions (3)Used By (3)

pitana.js
=========

[](#pitanajs)

Small Library on top of webcomponents.js for creating Reusable Custom Elements.

FAQ
===

[](#faq)

- WTF? Again a new Framework for JavaScript ! :(

    - Well, Its not a Framework, it is small Utility library to create Custom Elements. You can use this library with existing code (conditions apply)
- What? Custom Elements ?

    - Yes, Webcomponents.js provide Polyfills for Custom Elements, HTML Imports and Shadow DOM.
- So, Can I use this library with my existing Frameworks & CodeBase.

    - You can use this library with react.js, backbone.js, and all possible frameworks and libraries.
    - Yes, All you need to load - webcomponents-lite.min.js (36KB) + pitana.min.js (8KB)
    - Basic knowledge of WebComponents
    - Only supported in Modern Browser.
- But, Wait, Google has Polymer for creating Reusable Custom Elements, has lots of features. Why not use that ?

    - Yes, if you like Polymer then use it. But there are many who want to create custom Elements using Vanilla JS
    - For example - Mozilla created Brick () which is written in Vanilla JS
    - Pitana.js a tiny Wrapper Library which gives backbone.js type syntax for creating Vanilla JS Custom Elements.
    - The closest alternate library is x-tags (  ) which has more features.
- So what are the features ?

    - Sweet Syntax like backbone views.
    - Sandbox approach.
    - Events bus for Element to Element communication.
- Should I use it or not ?

    - Checkout some Elements created using pitana.js, If you like them, then use them and try to create some new Custom Element using pitana.js.
- What is the meaning of pitana ?

    - it is just a randomly created word.

\#Watch Video [![Alt text for your video](image.png)](https://www.youtube.com/watch?v=gI0un44VQoA)

<iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe> Syntax
======

[](#syntax)

- Yes, We have some Sweet syntax - You can compare \* progress-bar element using Vanilla JS \* \* Same progressbar Element written again with pitana.js \*

Documentation
=============

[](#documentation)

How to register custom element `pitana.register`
------------------------------------------------

[](#how-to-register-custom-element-pitanaregister)

```
pitana.register({
    tagName: "hello-world",
    attachedCallback: function () {
        //Do something
    }
});
```

How to add template string `template`
-------------------------------------

[](#how-to-add-template-string--template)

- template as string

```
pitana.register({
    tagName: "hello-world",
    template: "This is the template string"
});
```

- template as function

```
pitana.register({
    tagName: "hello-world",
    template: function(){
        return "This is the template string"
    }
});
```

or

- It can be a template Node

```
pitana.register({
    tagName: "hello-world",
    template: document.querySelector("template#helloworldTemplate")
});
```

How to listen `events`
----------------------

[](#how-to-listen--events)

```
pitana.register({
    tagName: "hello-world",
    events: {
        "click button#asd":"onClickButton"
    },
    template: "Hello World, Click button to See moreClick Me",
    onClickButton: function(){
        window.alert("I wish you, Very Happy New Year");
    }
});
```

How to use `accessors`
----------------------

[](#how-to-use--accessors)

```

```

```
pitana.register({
    tagName: "pt-stars",
    accessors: {
        count: {
            type: "int",
            onChange: "render"
        }
    },
    attachedCallback: function(){
        this.render();
    },
    render: function(){
        var str = "";
        var count = this.$.count;
        for(var i=0; i
```

### index.html

[](#indexhtml)

```
Pitna Hello World Element Demo
Change Count to 3

```

### js

[](#js)

```
pitana.register({
    tagName: "hello-world",
    accessors: {
        name: {
            type: "string"
        },
        count: {
            type: "int",
            onChange: "attachedCallback"
        }
    },
    attachedCallback: function () {
        var s = [];
        for (var i = 0; i