Aviya
Aviya copied to clipboard
SagiMedina
Components for simple projects
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)
SagiMedina