aviya

v2.0.5

Published

4 years ago

Components and JSX like for simple projects

0High
0Medium
0Low

sagimedina

EcmaScript JavaScript Vanilla Components JSX

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>

// 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>

// 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)