Browse Source

first test case met

master
John Shaver 9 months ago
commit
b6d8d8f447
4 changed files with 79 additions and 0 deletions
  1. 39
    0
      index.js
  2. 11
    0
      package.json
  3. 12
    0
      test.html
  4. 17
    0
      test.js

+ 39
- 0
index.js View File

@@ -0,0 +1,39 @@
1
+
2
+function pureComponentFactory (name, functionalRender) {
3
+  class ComponentClass extends HTMLElement  {
4
+    constructor (...args) {
5
+      super();
6
+      this.attachShadow({mode: 'open'});
7
+      console.log("CONSTRUCTOR");
8
+      return;
9
+    }
10
+    render(args) {
11
+      let newDom = functionalRender(args);
12
+      console.log("Rendering: ", newDom);
13
+      this.shadowRoot.innerHTML= newDom;
14
+    }
15
+    static get observedAttributes() {
16
+      //How do we make this flexible????
17
+      return ['count'];
18
+    }
19
+    connectedCallback() {
20
+      this.render(this.parseAttributes())
21
+    }
22
+    attributeChangedCallback() {
23
+      this.render(this.parseAttributes())
24
+    }
25
+    parseAttributes() {
26
+      console.log(this);
27
+      let attr = {};
28
+      for(let i = 0; i < this.attributes.length; ++i) {
29
+        attr[this.attributes[i].name] = this.getAttribute(this.attributes[i].name); 
30
+      }
31
+      console.log("Parse attributes: ", attr);
32
+      return attr;
33
+    }
34
+
35
+  }
36
+  window.customElements.define(name, ComponentClass);
37
+  return ComponentClass;
38
+}
39
+

+ 11
- 0
package.json View File

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

+ 12
- 0
test.html View File

@@ -0,0 +1,12 @@
1
+<html>
2
+  <head>
3
+    <script type="text/javascript" src="./index.js"></script>
4
+    <script type="text/javascript" src="./test.js"></script>
5
+  </head>
6
+  <body>
7
+    <div>
8
+      <count-ele id="count" count="1" ></count-ele>
9
+      <button onclick="buttonPress();">+1</button>
10
+    </div>
11
+  </body>
12
+</html>

+ 17
- 0
test.js View File

@@ -0,0 +1,17 @@
1
+
2
+let count = pureComponentFactory(
3
+  "count-ele",
4
+  ({count}) => {
5
+    console.log("RENDERING COUNT: ", count);
6
+    return `<div> <label> count: ${count}</label></div>`
7
+  }
8
+);
9
+
10
+var buttonPress = function() {
11
+  let count = document.querySelector("#count");
12
+  let oldValue =  parseInt(count.getAttribute('count'))
13
+  let newValue =  oldValue + 1;
14
+  console.log(`OldValue: ${oldValue} NewValue: ${newValue}`);
15
+  count.setAttribute('count', newValue.toString());
16
+};
17
+

Loading…
Cancel
Save