Browse Source

useState works!

master
John Shaver 8 months 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 @@
1
+import {prepareForRender} from "./store.js";
2
+import getId from "./id.js";
3
+
4
+export function hookComponentFactory(name, propNames, hookRender) {
5
+  class ComponentClass extends HTMLElement {
6
+    constructor (...args) {
7
+      super();
8
+      this.attachShadow({mode: 'open'});
9
+      this.identifier = getId(name);
10
+      this.domRender = hookRender.bind(this);
11
+      return;
12
+    }
13
+    render(args) {
14
+      prepareForRender(this.identifier, () => this.attributeChangedCallback());
15
+      let newDom = this.domRender(args, this);
16
+      this.shadowRoot.innerHTML= newDom;
17
+    }
18
+    connectedCallback() {
19
+      this.render(this.parseAttributes())
20
+    }
21
+    attributeChangedCallback() {
22
+      this.render(this.parseAttributes())
23
+    }
24
+    parseAttributes() {
25
+      console.log(this);
26
+      let attr = {};
27
+      for(let i = 0; i < this.attributes.length; ++i) {
28
+        attr[this.attributes[i].name] = this.getAttribute(this.attributes[i].name); 
29
+      }
30
+      console.log("Parse attributes: ", attr);
31
+      return attr;
32
+    }
33
+  }
34
+  window.customElements.define(name, ComponentClass);
35
+  return ComponentClass;
36
+}

+ 5
- 0
id.js View File

@@ -0,0 +1,5 @@
1
+let nextId = 1;
2
+
3
+export default function getId(name){
4
+  return name + nextId++;
5
+}

+ 3
- 39
index.js View File

@@ -1,39 +1,3 @@
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
-
1
+export {pureComponentFactory} from "./pureComponentFactory.js";
2
+export {hookComponentFactory} from "./hookComponentFactory.js";
3
+export {useState} from "./store.js";

+ 38
- 0
pureComponentFactory.js View File

@@ -0,0 +1,38 @@
1
+import getId from "./id.js";
2
+
3
+export function pureComponentFactory (name, propNames, functionalRender) {
4
+  class ComponentClass extends HTMLElement  {
5
+    constructor (...args) {
6
+      super();
7
+      this.attachShadow({mode: 'open'});
8
+      this.identifier = getId(name);
9
+      return;
10
+    }
11
+    render(args) {
12
+      let newDom = functionalRender(args);
13
+      this.shadowRoot.innerHTML= newDom;
14
+    }
15
+    static get observedAttributes() {
16
+      //How do we make this flexible????
17
+      return propNames;
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
+}

+ 31
- 0
store.js View File

@@ -0,0 +1,31 @@
1
+const stateStore = {};
2
+
3
+let componentId;
4
+let stateIndex = 0;
5
+let handleStateChange;
6
+
7
+export function useState(defaultValue) {
8
+  const savedId = componentId;
9
+  const savedIndex = stateIndex++;
10
+  const savedHandler = handleStateChange;
11
+  if(!stateStore[savedId]) {
12
+    stateStore[savedId] = [];
13
+  }
14
+
15
+  if(!stateStore[savedId][savedIndex]) {
16
+    stateStore[savedId][savedIndex] = [
17
+      defaultValue,
18
+      value => {
19
+        stateStore[savedId][savedIndex][0] = value;
20
+        savedHandler();
21
+      },
22
+    ]
23
+  }
24
+
25
+  return stateStore[savedId][savedIndex]
26
+}
27
+export function prepareForRender(_componentId, _handleStateChange) {
28
+  stateIndex = 0;
29
+  componentId = _componentId;
30
+  handleStateChange = _handleStateChange;
31
+}

Loading…
Cancel
Save