refactored code to avoid relative paths

added Component and Page base classes
added Clock widget (wip)

WebApp/package.json

@@ -19,6 +19,7 @@
     "purgecss-webpack-plugin": "^4.1.3",
     "style-loader": "^3.3.1",
     "ts-loader": "^9.2.8",
+    "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.6.2",
     "webpack": "^5.70.0",
     "webpack-cli": "^4.9.2"

WebApp/src/app.ts

@@ -1,8 +1,8 @@
 import m from 'mithril';
 
 import Layout from './layout';
-import RawDataPage from './raw-data-page';
-import DashboardPage from './dashboard-page';
+import { RawDataPage } from 'pages/raw-data/raw-data-page';
+import { DashboardPage } from 'pages/dashboard/dashboard-page';
 
 require('../node_modules/bulma/css/bulma.css');
 

WebApp/src/components/component.ts

@@ -0,0 +1,19 @@
+import m from 'mithril';
+
+export abstract class Component {
+	abstract view(vnode: m.Vnode): m.Children;
+	
+	oninit(vnode: m.Vnode) {}
+	
+    oncreate(vnode: m.Vnode) {}
+    
+    onbeforeupdate(newVnode: m.Vnode, oldVnode: m.Vnode) {
+        return true;
+    }
+    
+    onupdate(vnode: m.Vnode) {}
+    
+    onbeforeremove(vnode: m.Vnode): Promise<void> | void {}
+    
+    onremove(vnode: m.Vnode) {}
+}

WebApp/src/components/page.ts

@@ -0,0 +1,5 @@
+import { Component } from 'components/component';
+
+export abstract class Page extends Component {
+	
+}

WebApp/src/components/widgets/clock.tsx

@@ -0,0 +1,8 @@
+import m from 'mithril';
+import { Component } from 'components/component'
+
+export default class Clock extends Component {
+	view(vnode: m.Vnode<{}, {}>): m.Children {
+		return <p>clock</p>;    
+	}
+}

WebApp/src/pages/dashboard/dashboard-page.tsx

@@ -1,7 +1,9 @@
 import m from 'mithril';
-import { MonitorApi, Status } from './monitor-api';
+import { Page } from 'components/page';
+import { MonitorApi, Status } from 'monitor-api';
+import Clock from 'components/widgets/clock';
 
-export default class DashboardPage {
+export class DashboardPage extends Page {
 	status: Status = null;
 	autoRefresh = true;
 	
@@ -10,8 +12,8 @@ export default class DashboardPage {
 		this.refresh();
 	}
 	
-	onbeforeremove() {
-		this.autoRefresh = false;
+	onbeforeremove(vnode: m.Vnode<{}, {}>) {
+    	this.autoRefresh = false;
 	}
 	
 	async refresh() {
@@ -23,6 +25,7 @@ export default class DashboardPage {
 	view() {
 		return this.status
 			? <div class="dashboard-page">
+				<Clock/>
 			</div>
 			: <p>Chargement...</p>;
 	}

WebApp/src/pages/raw-data/raw-data-page.tsx

@@ -1,9 +1,10 @@
 import m from 'mithril';
-import { MonitorApi, Status } from './monitor-api';
+import { Page } from 'components/page';
+import { MonitorApi, Status } from 'monitor-api';
 
 require("./raw-data-page.css");
 
-export default class RawDataPage {
+export class RawDataPage extends Page {
 	status: Status = null;
 	autoRefresh = true;
 	

WebApp/tsconfig.json

@@ -1,12 +1,15 @@
 {
   "compilerOptions": {
     "noImplicitAny": true,
-    "module": "CommonJS",
+    "module": "ES6",
     "esModuleInterop": true,
     "target": "es5",
     "jsx": "react",
     "jsxFactory": "m",
     "allowJs": true,
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "baseUrl": "./src",
+    "paths": {
+    }
   }
 }

WebApp/webpack.config.js

@@ -5,6 +5,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const PurgecssPlugin = require('purgecss-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 
 module.exports = {
   entry: './src/app.ts',
@@ -23,6 +24,7 @@ module.exports = {
   },
   resolve: {
     extensions: ['.tsx', '.ts', '.js'],
+    plugins: [new TsconfigPathsPlugin({})]
   },
   output: {
     filename: '[name].js',