Component
Sub Component
A html DOM node can repesent a component. To declare a component use a comment block
<!-- {{component:<mySubComponent>}} -->
.
import Keet, { html, childLike } from 'keet'
@childLike() // babel-plugin-transform-decorators
class Sub extends Keet {
el = 'sub'
render() {
return html`
<div id="sub">
this is a sub-component
</div>
`
}
}
const sub = new Sub()
class App extends Keet {
el = 'app'
render() {
return html`
<div id="container">
<div>parent</div>
<!-- {{component:sub}} -->
</div>
`
}
}
const app = new App()
Codepen Sample
See the Pen Keetjs - Component by Shahrul Nizam b. Selamat (@syarul) on CodePen.
Notifying state changes across different components
Each component has pub/sub methods where another component can subscribe to changes in another component i.e
// file main.js
import Keet from 'keet'
import other from './other'
class Main extends Keet {
constructor() {
super()
this.state = 'main'
other.subscribe(state => this.state = state)
}
}
const main = new Main()
on another file
// file other.js
import Keet from 'keet'
class Other extends Keet {}
const other = new Other()
export default other
then invoke the method update
other.inform('other')