Browse Source

useState works!

master
John Shaver 3 years ago
parent
commit
e5d58ddf11
  1. 36
      hookComponentFactory.js
  2. 5
      id.js
  3. 42
      index.js
  4. 38
      pureComponentFactory.js
  5. 31
      store.js

36
hookComponentFactory.js

@ -0,0 +1,36 @@ @@ -0,0 +1,36 @@
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;
}

5
id.js

@ -0,0 +1,5 @@ @@ -0,0 +1,5 @@
let nextId = 1;
export default function getId(name){
return name + nextId++;
}

42
index.js

@ -1,39 +1,3 @@ @@ -1,39 +1,3 @@
function pureComponentFactory (name, functionalRender) {
class ComponentClass extends HTMLElement {
constructor (...args) {
super();
this.attachShadow({mode: 'open'});
console.log("CONSTRUCTOR");
return;
}
render(args) {
let newDom = functionalRender(args);
console.log("Rendering: ", newDom);
this.shadowRoot.innerHTML= newDom;
}
static get observedAttributes() {
//How do we make this flexible????
return ['count'];
}
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;
}
export {pureComponentFactory} from "./pureComponentFactory.js";
export {hookComponentFactory} from "./hookComponentFactory.js";
export {useState} from "./store.js";

38
pureComponentFactory.js

@ -0,0 +1,38 @@ @@ -0,0 +1,38 @@
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;
}

31
store.js

@ -0,0 +1,31 @@ @@ -0,0 +1,31 @@
const stateStore = {};
let componentId;
let stateIndex = 0;
let handleStateChange;
export function useState(defaultValue) {
const savedId = componentId;
const savedIndex = stateIndex++;
const savedHandler = handleStateChange;
if(!stateStore[savedId]) {
stateStore[savedId] = [];
}
if(!stateStore[savedId][savedIndex]) {
stateStore[savedId][savedIndex] = [
defaultValue,
value => {
stateStore[savedId][savedIndex][0] = value;
savedHandler();
},
]
}
return stateStore[savedId][savedIndex]
}
export function prepareForRender(_componentId, _handleStateChange) {
stateIndex = 0;
componentId = _componentId;
handleStateChange = _handleStateChange;
}
Loading…
Cancel
Save