DEPRECATED. Please use nanocomponent or base-element instead.
yo-yo components with classes and events.
const Component = require('ycom')The module exports Component, a class that should be extended for use by consumers. Component extends EventEmitter, so passing events around is supported out of the box.
- opts: Passed to
EventEmitter. Optional.
Should be overridden by consumers to return an instance of HTMLElement.
Check out the npm packages bel, hyperx, and yo-yo for easy generation of HTMLElement instances from Javascript.
When the component node is added to the document, the added prototype method will be called, and the added event will be fired.
When the component node is removed from the document, the removed prototype method will be called, and the removed event will be fired.
Returns the node currently assigned to the component, or generates one if it doesn't exist.
const Component = require('ycom')
const yo = require('yo-yo')
class MyComponent extends Component {
constructor({ message = '' } = {}) {
super() // You can pass arguments to the EventEmitter constructor here (optional).
this.message = message
}
added() {
console.log("called when added to the DOM!")
}
removed() {
console.log("called when removed from the DOM!")
}
render() {
return yo`<em>${this.message}</em>` // compose the component rendering function here
}
}
let component = new MyComponent({ message: "Hello Javascript!" })
component.once('added', () => console.log("also called when added to the DOM"))
component.once('removed', () =>
console.log("also called when removed from the DOM")
)
document.body.appendChild(component.node)MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent