diff --git a/index.html b/index.html
index 867581c5124fa10fc96ed02a61783181cba50bf6..19dd971a7e36b6a0c6a5948ab54448038e2462ec 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
<title>Vite App</title>
</head>
<body>
- <div id="app"></div>
+ <div id="app" class="hydrogen"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
diff --git a/src/main.ts b/src/main.ts
index f77db7a8fcab13bfe7abcbfeb7997f27b72bb1f7..c0b09b71825d701ddc4363940f5bc9b1f4113ca9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,8 +1,56 @@
-import './style.css'
+import {
+ Platform,
+ Client,
+ LoadStatus,
+ createNavigation,
+ createRouter,
+ RoomViewModel,
+ TimelineView
+} from "hydrogen-view-sdk";
+import assetPaths from "hydrogen-view-sdk/paths/vite";
+import "hydrogen-view-sdk/style.css";
-const app = document.querySelector<HTMLDivElement>('#app')!
+async function main() {
+ const app = document.querySelector<HTMLDivElement>('#app')!
+ const config = {};
+ const platform = new Platform(app, assetPaths, config, { development: import.meta.env.DEV });
+ const navigation = createNavigation();
+ platform.setNavigation(navigation);
+ const urlRouter = createRouter({
+ navigation: navigation,
+ history: platform.history
+ });
+ urlRouter.attach();
+ const client = new Client(platform);
-app.innerHTML = `
- <h1>Hello Vite!</h1>
- <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
-`
+ const loginOptions = await client.queryLogin("matrix.org").result;
+ client.startWithLogin(loginOptions.password("foobaraccount", "UzmiRif6UnHqp6s"));
+
+ await client.loadStatus.waitFor((status: string) => {
+ return status === LoadStatus.Ready ||
+ status === LoadStatus.Error ||
+ status === LoadStatus.LoginFailed;
+ }).promise;
+
+ if (client.loginFailure) {
+ alert("login failed: " + client.loginFailure);
+ } else if (client.loadError) {
+ alert("load failed: " + client.loadError.message);
+ } else {
+ const {session} = client;
+ // looks for room corresponding to #element-dev:matrix.org, assuming it is already joined
+ const room = session.rooms.get("!nXJtsUatHBGyIYfyYw:matrix.org");
+ const vm = new RoomViewModel({
+ room,
+ ownUserId: session.userId,
+ platform,
+ urlCreator: urlRouter,
+ navigation,
+ });
+ await vm.load();
+ const view = new TimelineView(vm.timelineViewModel);
+ app.appendChild(view.mount());
+ }
+}
+
+main();
\ No newline at end of file