37 lines
1.1 KiB
JavaScript
37 lines
1.1 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();
|
||
|
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() {
|
||
|
console.log(this);
|
||
|
let attr = {};
|
||
|
for(let i = 0; i < this.attributes.length; ++i) {
|
||
|
attr[this.attributes[i].name] = this.getAttribute(this.attributes[i].name);
|
||
|
}
|
||
|
console.log("Parse attributes: ", attr);
|
||
|
return attr;
|
||
|
}
|
||
|
}
|
||
|
window.customElements.define(name, ComponentClass);
|
||
|
return ComponentClass;
|
||
|
}
|