Entry component list by virtual-dom and main-loop

Problem with vdom h Matt-Esch/virtual-dom#421

src/webhive.frontend/README.md

@@ -13,6 +13,7 @@
 ### CSS Variables
 
 ## TODO
+* nav component try use, link rel
 * analize
 * preact move to app only
 ```

src/webhive.frontend/app_modules/virtual-dom-h-proxy/README.md

@@ -0,0 +1,3 @@
+# virtual-dom-h-proxy
+Loop inside JSX templates has issues
+https://github.com/Matt-Esch/virtual-dom/issues/421

src/webhive.frontend/app_modules/virtual-dom-h-proxy/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "virtual-dom-h-proxy",
+  "main": "src"
+}

src/webhive.frontend/app_modules/virtual-dom-h-proxy/src/index.ts

@@ -0,0 +1,5 @@
+const vdomh = require('virtual-dom/h');
+
+export function h(type, props, ...children) {
+    return vdomh(type, props, [children]);
+}

src/webhive.frontend/entry-list.component/src/entry-list.component.tsx

@@ -1,12 +1,23 @@
 import { EntryListService } from './entry-list.service';
-import { h, render, Fragment } from 'preact';
 import './entry.component';
+import { Entry } from './entry';
+import { h } from 'virtual-dom-h-proxy';
+const mainLoop = require('main-loop');
 
 const styles = document.createElement('style');
 styles.textContent = require('./entry-list.component.css');
 
-const template = document.createElement('template');
-template.innerHTML = '<div></div>';
+function render(state: Entry[]) {
+    return <div>
+        {state.map(entry => <entry-component entry={entry}></entry-component>)}
+    </div>;
+}
+
+const loop = mainLoop([], render, {
+    create: require('virtual-dom/create-element'),
+    diff: require('virtual-dom/diff'),
+    patch: require('virtual-dom/patch'),
+});
 
 export class EntryListComponent extends HTMLElement {
 
@@ -19,29 +30,29 @@ export class EntryListComponent extends HTMLElement {
         return [];
     }
 
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' });
-        this.shadow.appendChild(styles.cloneNode(true));
-        this.service = new EntryListService(this);
-    }
-
     private get shadow() {
         if (!this.shadowRoot) {
             throw new Error('shadowRoot is null');
         }
         return this.shadowRoot;
     }
 
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.shadow.append(styles.cloneNode(true));
+        this.shadow.append(loop.target);
+        this.service = new EntryListService(this);
+    }
+
     /**
      * Invoked each time the custom element is appended into a document-connected element.
      * This will happen each time the node is moved, and may happen before the element's contents
      * have been fully parsed
      */
     async connectedCallback() {
-        const entries = (await this.service.find())
-            .map(entry => <entry-component entry={entry}></entry-component>);
-        render(entries, this.shadow);
+        const entries = await this.service.find();
+        loop.update(entries);
     }
 
     /**

src/webhive.frontend/package.json

@@ -9,8 +9,10 @@
   },
   "dependencies": {
     "@shinin/load-script": "1.0.4",
+    "main-loop": "3.4.0",
     "preact": "10.0.0-beta.3",
-    "space-router": "0.7.0"
+    "space-router": "0.7.0",
+    "virtual-dom": "2.1.1"
   },
   "devDependencies": {
     "@types/html-webpack-plugin": "3.2.0",
@@ -24,6 +26,7 @@
     "html-webpack-plugin": "3.2.0",
     "source-map-loader": "0.2.4",
     "style-loader": "0.23.1",
+    "terser-webpack-plugin": "1.3.0",
     "ts-loader": "6.0.2",
     "typescript": "3.5.2",
     "webpack": "4.34.0",

src/webhive.frontend/webpack.config.js

@@ -8,7 +8,7 @@ const defaultOptions = {
     test: false,
     coverage: false,
     prod: process.argv.includes('--env.mode=production'),
-    nomin: true,
+    nomin: false,
     debug: false,
     get dev() {
         return !this.prod;
@@ -51,6 +51,10 @@ module.exports = (options = {}) => {
         })(),
         resolve: {
             extensions: ['.js', '.ts', '.tsx', '.json'],
+            modules: [
+                `${__dirname}/app_modules`,
+                'node_modules',
+            ],
         },
         devServer: {
             contentBase: [buildPath],
@@ -112,7 +116,21 @@ module.exports = (options = {}) => {
                     config: { ...options },
                 });
             })(),
-        ]
+        ],
+        optimization: {
+            minimizer: [
+                (options.minimize ? () => {
+                    const TerserPlugin = require('terser-webpack-plugin');
+                    return new TerserPlugin({
+                        terserOptions: {
+                            output: {
+                                comments: false,
+                            },
+                        },
+                    });
+                } : () => undefined)(),
+            ].filter(Boolean),
+        },
     };
 
     return config;