documentation and more components

Former-commit-id: 9ca95c654e91e095bdab2d4587ad28953a84d301

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);

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) {

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);

client/public/components/templates/compact-listing.html

@@ -0,0 +1 @@
+{this.state.item}

client/public/components/templates/storefront.html

@@ -0,0 +1,3 @@
+<div class="product-list">
+    
+</div>

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>

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