From 7797f0536f31adcb2f095a795e4dac8a6ff8990b Mon Sep 17 00:00:00 2001
From: Ben <36240171+benkyd@users.noreply.github.com>
Date: Tue, 22 Mar 2022 18:31:46 +0000
Subject: [PATCH] documentation and more components

Former-commit-id: 9ca95c654e91e095bdab2d4587ad28953a84d301
---
 client/public/components/compact-listing.mjs  | 22 +++++
 client/public/components/components.mjs       |  6 +-
 .../public/components/css/compact-listing.css |  0
 client/public/components/css/storefront.css   |  0
 client/public/components/storefront.mjs       | 27 ++++++
 .../components/templates/compact-listing.html |  1 +
 .../components/templates/storefront.html      |  3 +
 client/public/index.html                      |  9 +-
 docs/CLIENT-FRAMEWORK.md                      | 84 +++++++++++++++++++
 9 files changed, 143 insertions(+), 9 deletions(-)
 create mode 100644 client/public/components/compact-listing.mjs
 create mode 100644 client/public/components/css/compact-listing.css
 create mode 100644 client/public/components/css/storefront.css
 create mode 100644 client/public/components/storefront.mjs
 create mode 100644 client/public/components/templates/compact-listing.html
 create mode 100644 client/public/components/templates/storefront.html

diff --git a/client/public/components/compact-listing.mjs b/client/public/components/compact-listing.mjs
new file mode 100644
index 0000000..8faf313
--- /dev/null
+++ b/client/public/components/compact-listing.mjs
@@ -0,0 +1,22 @@
+import { RegisterComponent, Component, SideLoad } from './components.mjs';
+
+class CompactProductListing extends Component {
+    static __IDENTIFY => 'compact-listing';
+
+    constructor() {
+        super(CompactProductListing);
+    }
+
+    Render() {
+        return {
+            template: SideLoad('./components/templates/compact-listing.html'),
+            style: SideLoad('./components/css/compact-listing.css'),
+        };
+    }
+
+    OnceRendered() {
+
+    }
+}
+
+RegisterComponent(CompactProductListing);
diff --git a/client/public/components/components.mjs b/client/public/components/components.mjs
index 1c7f9be..d7a82dd 100644
--- a/client/public/components/components.mjs
+++ b/client/public/components/components.mjs
@@ -39,11 +39,12 @@ export class Component extends HTMLElement {
         // be sure to include them in the state to be sure that
         // they can be resolved
         for (const attribute of this.attributes) {
-            console.log(attribute);
             this.SetState({ ...this.state, [attribute.name]: attribute.value });
         }
 
-        this.__INVOKE_RENDER();
+        if (this.attributes.length === 0) {
+            this.__INVOKE_RENDER();
+        }
     }
 
     disconnectedCallback() {
@@ -82,7 +83,6 @@ export class Component extends HTMLElement {
     }
 
     async __INVOKE_RENDER() {
-        console.log('invoking render');
         const res = this.Render(Object.bind(this));
 
         if (!res.template || !res.style) {
diff --git a/client/public/components/css/compact-listing.css b/client/public/components/css/compact-listing.css
new file mode 100644
index 0000000..e69de29
diff --git a/client/public/components/css/storefront.css b/client/public/components/css/storefront.css
new file mode 100644
index 0000000..e69de29
diff --git a/client/public/components/storefront.mjs b/client/public/components/storefront.mjs
new file mode 100644
index 0000000..0c172f4
--- /dev/null
+++ b/client/public/components/storefront.mjs
@@ -0,0 +1,27 @@
+import { RegisterComponent, Component, SideLoad } from './components.mjs';
+
+class StoreFront extends Component {
+    static __IDENTIFY() { return 'storefront'; }
+
+    constructor() {
+        super(StoreFront);
+    }
+
+    Render() {
+        return {
+            template: SideLoad('./components/templates/storefront.html'),
+            style: SideLoad('./components/css/storefront.css'),
+        };
+    }
+
+    OnceRendered() {
+        const items = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10'];
+        for (const item of items) {
+            const itemElement = document.createElement('compact-listing-component');
+            itemElement.setAttribute('item', item);
+            this.root.appendChild(itemElement);
+        }
+    }
+}
+
+RegisterComponent(StoreFront);
diff --git a/client/public/components/templates/compact-listing.html b/client/public/components/templates/compact-listing.html
new file mode 100644
index 0000000..7f2c95f
--- /dev/null
+++ b/client/public/components/templates/compact-listing.html
@@ -0,0 +1 @@
+{this.state.item}
\ No newline at end of file
diff --git a/client/public/components/templates/storefront.html b/client/public/components/templates/storefront.html
new file mode 100644
index 0000000..466b38b
--- /dev/null
+++ b/client/public/components/templates/storefront.html
@@ -0,0 +1,3 @@
+<div class="product-list">
+    
+</div>
diff --git a/client/public/index.html b/client/public/index.html
index 7bbf779..b7eb9a3 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -12,6 +12,8 @@
 	<script type="module" src="components/components.mjs"></script>
 	<script type="module" src="components/navbar.mjs"></script>
 	<script type="module" src="components/notificationbar.mjs"></script>
+	<script type="module" src="components/storefront.mjs"></script>
+	<script type="module" src="components/compact-listing.mjs"></script>
 
 	<script type="module" src="index.mjs"></script>
 </head>
@@ -21,13 +23,8 @@
 	<limited-margin>
 		<navbar-component></navbar-component>
 		
-		<content-margin>
-			
-			<div id="top-picks">
-				Today's Top Picks
-			</div>
+		<storefront-component></storefront-component>
 
-		</content-margin>
 
 		<!-- <canvas id="webglviewer" width="300" height="300"></canvas> -->
 		<!-- <canvas id="webglviewer" width="300" height="300"></canvas>
diff --git a/docs/CLIENT-FRAMEWORK.md b/docs/CLIENT-FRAMEWORK.md
index e69de29..5224292 100644
--- a/docs/CLIENT-FRAMEWORK.md
+++ b/docs/CLIENT-FRAMEWORK.md
@@ -0,0 +1,84 @@
+# Client Framework
+
+It is important for the future maintainership of this small website
+that the code can easily be understood by the "average" programmer,
+of which Rich mentions that 50% of programmers being below average
+would mean that any advanced system would not be maintainable.
+
+I chose to write a very simple templating and component library based
+off of the new HTMLElement concept to function react-esque without the
+burden of transpilation.
+
+Quite simply a component is a class extension of the base class 
+`Component`, It is expected that this is implemeneted as such with the
+other methods filled in.
+
+```js
+class MyComponent extends Component {
+    static __IDENTIFY() { return 'MyComponent'; }
+
+    constructor() {
+        super(MyComponent);
+    }
+}
+```
+
+That is the simplest form a component can be, it won't render but it
+will register it's self in the DOM and be accessable with the
+`<mycomponent-component></mycomponent-component>` tag within the DOM.
+
+In order to get some stuff rendering in there, it is important to
+override the `Render` method, returning an object with a template
+and a style sheet, or a promise that will resolve these, so they can be
+asynchronusly loaded by the framework.
+
+
+Basic loading
+```js
+class MyComponent extends Component {
+    static __IDENTIFY() { return 'MyComponent'; }
+
+    constructor() {
+        super(MyComponent);
+    }
+
+    Render() {
+        return {
+            template: `<div>{this.state.name}</div>`,
+            style: `div { text-color: red }`,
+        };
+    }
+}
+```
+
+Asynchronus loading
+```js
+class MyComponent extends Component {
+    static __IDENTIFY() { return 'MyComponent'; }
+
+    constructor() {
+        super(MyComponent);
+    }
+
+    Render() {
+        return {
+            template: SideLoad('MyComponent.html'),
+            style: SideLoad('MyComponent.css'),
+        };
+    }
+}
+```
+
+## State
+
+Similarly to React this framework includes a concept for statefulness,
+a given component has a state which can be user-defined `this.state.x=`
+or an attribute to the component tag in the HTML, or both. When the
+state changes, the component is re-renderered.
+
+State is updated with `SetState()`.
+
+Within the HTML, any instance of `{this.state.}` will be replaced with
+the internal state of the component.
+
+TODO: Global state