Startinga basic frontend application.

frontend/public/js/index.js

@@ -1923,12 +1923,40 @@ var require_mithril = __commonJS((exports, module) => {
 });
 
 // src/index.ts
+var import_mithril2 = __toESM(require_mithril(), 1);
+
+// src/components/UserList.ts
 var import_mithril = __toESM(require_mithril(), 1);
+
+// src/models/User.ts
+class User {
+  username;
+  constructor(username) {
+    this.username = username;
+  }
+  getUsername() {
+    return this.username;
+  }
+}
+
+// src/components/UserList.ts
+var users = [
+  new User("U1"),
+  new User("U2"),
+  new User("U3")
+];
+var oninit = function() {
+};
+var view = function() {
+  return import_mithril.default(".UserList", import_mithril.default("ul", users.map((u) => import_mithril.default("li", u.getUsername()))));
+};
+var UserList = { oninit, view };
+var UserList_default = UserList;
+
+// src/index.ts
 var App = {
   view: function() {
-    return import_mithril.default("body", [
+    return import_mithril2.default("body", [UserList_default]);
-      import_mithril.default("div", "Hello!")
-    ]);
   }
 };
-import_mithril.default.mount(document.body, App);
+import_mithril2.default.mount(document.body, App);

frontend/src/components/UserList.ts

@@ -7,12 +7,15 @@ const users: User[] = [
   new User('U3')
 ];
 
-export default const UserList = {
+const oninit = function () {
-  getList: function () {
+  // get the users value
-     return users.map(u => m('li', u.getUsername()));
-  },
-
-  view: function () {
-    return m('li', { id: 'UserList' }, this.getList());
-  }
 };
+
+const view = function () {
+  return m('.UserList', 
+    m('ul', users.map(u => m('li', u.getUsername())))
+  );
+}
+
+const UserList = { oninit, view };
+export default UserList;

frontend/src/index.ts

@@ -3,9 +3,7 @@ import UserList from './components/UserList';
 
 const App = {
   view: function() {
-    return m('body', [
+    return m('body', [ UserList ]);
-      UserList
-    ]);
   }
 }