ソースを参照

first test case met

master
John Shaver 1年前
コミット
b6d8d8f447
4個のファイルの変更79行の追加0行の削除
  1. 39
    0
      index.js
  2. 11
    0
      package.json
  3. 12
    0
      test.html
  4. 17
    0
      test.js

+ 39
- 0
index.js ファイルの表示

@@ -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
- 0
package.json ファイルの表示

@@ -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
- 0
test.html ファイルの表示

@@ -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
- 0
test.js ファイルの表示

@@ -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());
};


読み込み中…
キャンセル
保存