first test case met

2019-03-11 15:34:01 -07:00 · 2019-03-11 15:34:01 -07:00 · b6d8d8f447
commit b6d8d8f447
4 changed files with 79 additions and 0 deletions
--- a/index.js
+++ b/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;
+}
+
--- a/package.json
+++ b/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"
+}
--- a/test.html
+++ b/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>
--- a/test.js
+++ b/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());
+};
+