diff --git a/src/webhive.frontend/README.md b/src/webhive.frontend/README.md
index ce6da31..e9c0d27 100644
--- a/src/webhive.frontend/README.md
+++ b/src/webhive.frontend/README.md
@@ -13,6 +13,7 @@
### CSS Variables
## TODO
+* nav component try use, link rel
* analize
* preact move to app only
```
diff --git a/src/webhive.frontend/app_modules/virtual-dom-h-proxy/README.md b/src/webhive.frontend/app_modules/virtual-dom-h-proxy/README.md
new file mode 100644
index 0000000..818263e
--- /dev/null
+++ b/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
diff --git a/src/webhive.frontend/app_modules/virtual-dom-h-proxy/package.json b/src/webhive.frontend/app_modules/virtual-dom-h-proxy/package.json
new file mode 100644
index 0000000..ac42073
--- /dev/null
+++ b/src/webhive.frontend/app_modules/virtual-dom-h-proxy/package.json
@@ -0,0 +1,4 @@
+{
+ "name": "virtual-dom-h-proxy",
+ "main": "src"
+}
diff --git a/src/webhive.frontend/app_modules/virtual-dom-h-proxy/src/index.ts b/src/webhive.frontend/app_modules/virtual-dom-h-proxy/src/index.ts
new file mode 100644
index 0000000..0333aba
--- /dev/null
+++ b/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]);
+}
diff --git a/src/webhive.frontend/entry-list.component/src/entry-list.component.tsx b/src/webhive.frontend/entry-list.component/src/entry-list.component.tsx
index 146c09d..abd168d 100644
--- a/src/webhive.frontend/entry-list.component/src/entry-list.component.tsx
+++ b/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 = '
';
+function render(state: Entry[]) {
+ return
+ {state.map(entry => )}
+
;
+}
+
+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,13 +30,6 @@ 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');
@@ -33,15 +37,22 @@ export class EntryListComponent extends HTMLElement {
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 => );
- render(entries, this.shadow);
+ const entries = await this.service.find();
+ loop.update(entries);
}
/**
diff --git a/src/webhive.frontend/package.json b/src/webhive.frontend/package.json
index 0029ab3..a5a8ff7 100644
--- a/src/webhive.frontend/package.json
+++ b/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",
diff --git a/src/webhive.frontend/webpack.config.js b/src/webhive.frontend/webpack.config.js
index bea2270..a153ab8 100644
--- a/src/webhive.frontend/webpack.config.js
+++ b/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;