1.1.0 • Published 5 years ago
@iljucha/application v1.1.0
Application
Usage
Create an application
./apps/example.js
Create your application.
import { Application, define } from "../node_modules/@iljucha/application/src/index.js"
export class AppExample extends Application {
// Use super() if you need the constructor
constructor(favouriteAnimal) {
super()
this.favouriteAnimal = favouriteAnimal
}
get selector() {
return "app-example"
}
get styles() {
return /*css*/`
p {
color: pink;
}
`
}
get template() {
return /*html*/`
My favourite animal is ${this.favouriteAnimal}.
<p>The End</p>
`
}
get paragraph() {
return this.select("p")
}
set favouriteAnimal(value) {
this._favouriteAnimal = value
}
get favouriteAnimal() {
return this._favouriteAnimal
}
onConnect() {
console.log("app-exampe spawned")
}
onDisconnect() {
console.log("app-example removed from the DOM")
}
// Example Event, there are many more predefined for usage like this
onClick(event) {
console.log("app-examle clicked", event)
}
// Activate Mutations Observer
onMutation(mutationRecord) {
console.log(mutationRecord)
}
})
define(AppExample)./js/main.js
Let the browser know your application.
import "./apps/example.js"Or:
import { AppExample } from "./apps/example.js"
let body = document.querySelector("body")
body.appendChild(new AppExample())./index.html
Import your application into the DOM.
...
<body>
<app-example></app-example>
</body>
...