35 lines
1.0 KiB
JavaScript
35 lines
1.0 KiB
JavaScript
import {prepareForRender} from "./store.js";
|
|
import getId from "./id.js";
|
|
|
|
export function hookComponentFactory(name, propNames, hookRender) {
|
|
class ComponentClass extends HTMLElement {
|
|
constructor (...args) {
|
|
super(...args);
|
|
this.attachShadow({mode: 'open'});
|
|
this.identifier = getId(name);
|
|
this.domRender = hookRender.bind(this);
|
|
return;
|
|
}
|
|
render(args) {
|
|
prepareForRender(this.identifier, () => this.attributeChangedCallback());
|
|
let newDom = this.domRender(args, this);
|
|
this.shadowRoot.innerHTML= newDom;
|
|
}
|
|
connectedCallback() {
|
|
this.render(this.parseAttributes())
|
|
}
|
|
attributeChangedCallback() {
|
|
this.render(this.parseAttributes())
|
|
}
|
|
parseAttributes() {
|
|
let attr = {};
|
|
for(let i = 0; i < this.attributes.length; ++i) {
|
|
attr[this.attributes[i].name] = this.getAttribute(this.attributes[i].name);
|
|
}
|
|
return attr;
|
|
}
|
|
}
|
|
window.customElements.define(name, ComponentClass);
|
|
return ComponentClass;
|
|
}
|