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;