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.
npm install aviyaEntry 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();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();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();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>`
}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();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.
Aviya is constantly under development. You are all welcome to join us!
Code Examples
Dump Components
More Tests
Comparison With Alternative Packeges