Browse Source

useState works!

master
John Shaver 1 year ago
parent
commit
e5d58ddf11
5 changed files with 113 additions and 39 deletions
  1. 36
    0
      hookComponentFactory.js
  2. 5
    0
      id.js
  3. 3
    39
      index.js
  4. 38
    0
      pureComponentFactory.js
  5. 31
    0
      store.js

+ 36
- 0
hookComponentFactory.js View File

@@ -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
- 0
id.js View File

@@ -0,0 +1,5 @@
let nextId = 1;

export default function getId(name){
return name + nextId++;
}

+ 3
- 39
index.js View File

@@ -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
- 0
pureComponentFactory.js View File

@@ -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
- 0
store.js View File

@@ -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