jshaver/hooked-on-web-components
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

first test case met

Browse source
This commit is contained in:
John Shaver 2019-03-11 15:34:01 -07:00
commit b6d8d8f447
4 changed files with 79 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
index.js Normal file
View file

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

11
package.json Normal file
View file

@ -0,0 +1,11 @@
{
"name": "web-functional-component",
"version": "1.0.0",
"description": "A wrapper around web-components to allow more functional patterns",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "john@jshaver.net",
"license": "MIT"
}

12
test.html Normal file
View file

@ -0,0 +1,12 @@
<html>
<head>
<script type="text/javascript" src="./index.js"></script>
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
<div>
<count-ele id="count" count="1" ></count-ele>
<button onclick="buttonPress();">+1</button>
</div>
</body>
</html>

17
test.js Normal file
View file

@ -0,0 +1,17 @@
let count = pureComponentFactory(
"count-ele",
({count}) => {
console.log("RENDERING COUNT: ", count);
return `<div> <label> count: ${count}</label></div>`
}
);
var buttonPress = function() {
let count = document.querySelector("#count");
let oldValue = parseInt(count.getAttribute('count'))
let newValue = oldValue + 1;
console.log(`OldValue: ${oldValue} NewValue: ${newValue}`);
count.setAttribute('count', newValue.toString());
};