39 lines
1.0 KiB
JavaScript
39 lines
1.0 KiB
JavaScript
|
import getId from "./id.js";
|
||
|
|
||
|
export function pureComponentFactory (name, propNames, functionalRender) {
|
||
|
class ComponentClass extends HTMLElement {
|
||
|
constructor (...args) {
|
||
|
super();
|
||
|
this.attachShadow({mode: 'open'});
|
||
|
this.identifier = getId(name);
|
||
|
return;
|
||
|
}
|
||
|
render(args) {
|
||
|
let newDom = functionalRender(args);
|
||
|
this.shadowRoot.innerHTML= newDom;
|
||
|
}
|
||
|
static get observedAttributes() {
|
||
|
//How do we make this flexible????
|
||
|
return propNames;
|
||
|
}
|
||
|
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;
|
||
|
}
|