Skip to content

Latest commit

 

History

History
323 lines (229 loc) · 5.28 KB

README.md

File metadata and controls

323 lines (229 loc) · 5.28 KB
Raw

Welcome to Aviya!

Hey! If you had the chance to enjoy React. you probably liked the declarative views and the encapsulated components. It is Great! But you also probably think it is overkill for some of your more simpler projects.

Aviya a simple Class for you to extend that will give you the options to write your app using declarative views, encapsulated components and even, if you liked it, JSX style.

Installation

npm install aviya

Usage

Basic

Entry point:

  • HTML
// index.html
<header>
//...
</header>
<body>
  <div id="app"></div>
//...
</body>
  • JS
// index.js
import Hello from './Hello';
Hello.render('#app');

Hello Component:

// Hello.js
import Aviya from 'Aviya'

class Hello extends Aviya{
    constructor(){
        super();
    };

    html(){
        return(
            `
                <div>
                    <h1>Hello</h1>
                </div>
            `
        )
    }
}

export default new Hello();

Declarative views

You can use Declarative views just like you did with React. This is how:

// Hello.js
import Aviya from 'Aviya'
import World from './World'

class Hello extends Aviya{
    constructor(){
        super();
        this.addDependency(World);
    };

    html(){
        return(
            `
                <div>
                    <h1>Hello</h1>
                    <World></World>
                </div>
            `
        )
    }
}

export default new Hello();
// World.js
import Aviya from 'Aviya'

class World extends Aviya{
    constructor(){
        super();
    };

    html(){
        return(
            `
                <h2>World</h2>
            `
        )
    }
}

export default new World();

Use with events

This is how you handle events:

// World.js
import Aviya from 'Aviya'

class World extends Aviya{
    constructor(){
        super();
        this.addEventListener('#hello', 'input', this.logHelloWorld);
        this.addEventListener('#reset', 'click', this.Reset);
    };

    html(){
        return(
          `
              <div>
                  <input id="hello" type="text"/>
                  <button id="reset">Reset!</button>
              </div>
          `
        )
    }

    logHelloWorld(){
        document.getElementById('title').innerHTML = `Hello ${document.getElementById('hello').value}`;
    }

    Reset(){
        document.getElementById('title').innerHTML = `Hello World`;
        document.getElementById('hello').value = `World`;
    }
}

export default new World();

Dump Components

Just like React's Stateless Functions, You can use functions to create Components

// Hello.js
import Aviya from 'Aviya'
import World from './World'
import Dumb from './Dumb'

class Hello extends Aviya{
    constructor(){
        super();
        this.addDependency(World);
        this.addDependency(Dumb);
    };

    html(){
        return(
            `
                <div>
                    <h1 id="title">Hello</h1>
                    <World></World>
                    <Dumb></Dumb>
                </div>
            `
        )
    }
}

export default new Hello();
// Dumb.js
export default function Dumb () {
    return `<p>This is a Dumb Component</p>`
}

JSX Like

We use ES 2015 features to imitate JSX functionality

// Hello.js
import Aviya from 'Aviya'

class Hello extends Aviya{
    constructor(){
        super();
        this.title = 'Welcome to Aviya'
        this.someList = ['Hi', 'How', 'Are', 'You', '?']
    };

    html(){
        return(
            `
                <h1>${this.title}</h1>
                <ul>
                    ${this.someList.map( word => `<li>${word}</li>`).join('\n')}
                </ul>
            `
        )
    }
}

export default new Hello();

Write your html in a separate file

Note: You will have to wrape the html with tags naming after your component name

  • HTML
// hello.html
<Hello>
  <h1>Hello</h1>
</Hello>
  • JS
// Hello.js
import Aviya from 'Aviya'

class Hello extends Aviya{
    constructor(){
        super();
        //used with webpack's html-loader
        this.htmlFile = require('html!./hello.html')
    };
}

export default new Hello();

Tip: use webpack's html-loader for this one.

TO-DO

Aviya is constantly under development. You are all welcome to join us!

Code Examples

Dump Components

More Tests

Comparison With Alternative Packeges

License

MIT (http://www.opensource.org/licenses/mit-license.php)