From e5d58ddf1190ca6fcef1cb28ba1626347962f260 Mon Sep 17 00:00:00 2001
From: John Shaver <john@jshaver.net>
Date: Mon, 25 Mar 2019 19:50:23 -0700
Subject: [PATCH] useState works!

---
 hookComponentFactory.js | 36 +++++++++++++++++++++++++++++++++++
 id.js                   |  5 +++++
 index.js                | 42 +++--------------------------------------
 pureComponentFactory.js | 38 +++++++++++++++++++++++++++++++++++++
 store.js                | 31 ++++++++++++++++++++++++++++++
 5 files changed, 113 insertions(+), 39 deletions(-)
 create mode 100644 hookComponentFactory.js
 create mode 100644 id.js
 create mode 100644 pureComponentFactory.js
 create mode 100644 store.js

diff --git a/hookComponentFactory.js b/hookComponentFactory.js
new file mode 100644
index 0000000..6b4a3e1
--- /dev/null
+++ b/hookComponentFactory.js
@@ -0,0 +1,36 @@
+import {prepareForRender} from "./store.js";
+import getId from "./id.js";
+
+export function hookComponentFactory(name, propNames, hookRender) {
+  class ComponentClass extends HTMLElement {
+    constructor (...args) {
+      super();
+      this.attachShadow({mode: 'open'});
+      this.identifier = getId(name);
+      this.domRender = hookRender.bind(this);
+      return;
+    }
+    render(args) {
+      prepareForRender(this.identifier, () => this.attributeChangedCallback());
+      let newDom = this.domRender(args, this);
+      this.shadowRoot.innerHTML= newDom;
+    }
+    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;
+}
diff --git a/id.js b/id.js
new file mode 100644
index 0000000..46e7e89
--- /dev/null
+++ b/id.js
@@ -0,0 +1,5 @@
+let nextId = 1;
+
+export default function getId(name){
+  return name + nextId++;
+}
diff --git a/index.js b/index.js
index db3c872..3c39c8f 100644
--- a/index.js
+++ b/index.js
@@ -1,39 +1,3 @@
-
-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;
-}
-
+export {pureComponentFactory} from "./pureComponentFactory.js";
+export {hookComponentFactory} from "./hookComponentFactory.js";
+export {useState} from "./store.js";
diff --git a/pureComponentFactory.js b/pureComponentFactory.js
new file mode 100644
index 0000000..1640344
--- /dev/null
+++ b/pureComponentFactory.js
@@ -0,0 +1,38 @@
+import getId from "./id.js";
+
+export function pureComponentFactory (name, propNames, functionalRender) {
+  class ComponentClass extends HTMLElement  {
+    constructor (...args) {
+      super();
+      this.attachShadow({mode: 'open'});
+      this.identifier = getId(name);
+      return;
+    }
+    render(args) {
+      let newDom = functionalRender(args);
+      this.shadowRoot.innerHTML= newDom;
+    }
+    static get observedAttributes() {
+      //How do we make this flexible????
+      return propNames;
+    }
+    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;
+}
diff --git a/store.js b/store.js
new file mode 100644
index 0000000..c6167ab
--- /dev/null
+++ b/store.js
@@ -0,0 +1,31 @@
+const stateStore = {};
+
+let componentId;
+let stateIndex = 0;
+let handleStateChange;
+
+export function useState(defaultValue) {
+  const savedId = componentId;
+  const savedIndex = stateIndex++;
+  const savedHandler = handleStateChange;
+  if(!stateStore[savedId]) {
+    stateStore[savedId] = [];
+  }
+
+  if(!stateStore[savedId][savedIndex]) {
+    stateStore[savedId][savedIndex] = [
+      defaultValue,
+      value => {
+        stateStore[savedId][savedIndex][0] = value;
+        savedHandler();
+      },
+    ]
+  }
+
+  return stateStore[savedId][savedIndex]
+}
+export function prepareForRender(_componentId, _handleStateChange) {
+  stateIndex = 0;
+  componentId = _componentId;
+  handleStateChange = _handleStateChange;
+}