Changes added to work on the Matrix public archive

See plan https://docs.google.com/document/d/1wP_TIqmBQjtt862vb2CWWmnmVxTyolcF3J1scuiYMdg/edit#

 1. Trying to make it faster/easier to build `hydrogen.es.js` for local linking and dev in `matrix-public-arhive` project
 1. Some random changes to accomodate using raw `EventEntry`'s

scripts/sdk/base-manifest.json

@@ -2,6 +2,6 @@
     "name": "hydrogen-view-sdk",
     "description": "Embeddable matrix client library, including view components",
     "version": "0.0.4",
-    "main": "./hydrogen.es.js",
+    "main": "./lib-build/hydrogen.es.js",
     "type": "module"
 }

scripts/sdk/build.sh

@@ -1,5 +1,5 @@
 #!/bin/bash
-rm -rf target
+rm -rf target/*
 yarn run vite build -c vite.sdk-assets-config.js
 yarn run vite build -c vite.sdk-lib-config.js
 yarn tsc -p tsconfig-declaration.json

src/domain/session/room/RoomViewModel.js

@@ -21,6 +21,7 @@ import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../
 import {tilesCreator} from "./timeline/tilesCreator.js";
 import {ViewModel} from "../../ViewModel.js";
 
+console.log('RoomViewModel asdfwafeawfefewfewaeafwafewefw');
 export class RoomViewModel extends ViewModel {
     constructor(options) {
         super(options);
@@ -45,6 +46,7 @@ export class RoomViewModel extends ViewModel {
         this._room.on("change", this._onRoomChange);
         try {
             const timeline = await this._room.openTimeline();
+            console.log('timeline', timeline.entries);
             this._tilesCreator = tilesCreator(this.childOptions({
                 roomVM: this,
                 timeline,

src/domain/session/room/timeline/TimelineViewModel.js

@@ -36,6 +36,7 @@ import {ViewModel} from "../../../ViewModel.js";
 
 export class TimelineViewModel extends ViewModel {
     constructor(options) {
+        console.log('TimelineViewModel asdf', options)
         super(options);
         const {timeline, tilesCreator} = options;
         this._timeline = this.track(timeline);

src/domain/session/room/timeline/tiles/BaseMessageTile.js

@@ -87,7 +87,7 @@ export class BaseMessageTile extends SimpleTile {
     }
 
     get isOwn() {
-        return this._entry.sender === this._ownMember.userId;
+        return this._ownMember && this._entry.sender === this._ownMember.userId;
     }
 
     get isContinuation() {
@@ -124,6 +124,7 @@ export class BaseMessageTile extends SimpleTile {
 
     updateEntry(entry, param, tilesCreator) {
         const action = super.updateEntry(entry, param, tilesCreator);
+        console.log('updateEntry', entry);
         if (action.shouldUpdate) {
             this._updateReactions();
         }

src/lib.ts

@@ -24,5 +24,12 @@ export {SessionViewModel} from "./domain/session/SessionViewModel.js";
 export {SessionView} from "./platform/web/ui/session/SessionView.js";
 export {RoomViewModel} from "./domain/session/room/RoomViewModel.js";
 export {RoomView} from "./platform/web/ui/session/room/RoomView.js";
+export {MediaRepository} from "./matrix/net/MediaRepository";
+export {TilesCollection} from "./domain/session/room/timeline/TilesCollection.js";
+export {tilesCreator} from "./domain/session/room/timeline/tilesCreator.js";
+export {FragmentIdComparer} from "./matrix/room/timeline/FragmentIdComparer.js";
+export {EventEntry} from "./matrix/room/timeline/entries/EventEntry.js";
+export {encodeKey, decodeKey, encodeEventIdKey, decodeEventIdKey} from "./matrix/storage/idb/stores/TimelineEventStore";
+export {Timeline} from "./matrix/room/timeline/Timeline.js";
 export {TimelineViewModel} from "./domain/session/room/timeline/TimelineViewModel.js";
 export {TimelineView} from "./platform/web/ui/session/room/TimelineView";

src/matrix/room/timeline/Timeline.js

@@ -86,6 +86,7 @@ export class Timeline {
         const readerRequest = this._disposables.track(this._timelineReader.readFromEnd(20, txn, log));
         try {
             const entries = await readerRequest.complete();
+            console.log('entries', entries)
             this._loadContextEntriesWhereNeeded(entries);
             this._setupEntries(entries);
         } finally {
@@ -186,6 +187,8 @@ export class Timeline {
     }
 
     _addLocalRelationsToNewRemoteEntries(entries) {
+        console.log('_addLocalRelationsToNewRemoteEntries entries', entries)
+        console.log('this._localEntries?.hasSubscriptions entries', this._localEntries?.hasSubscriptions)
         // because it is not safe to iterate a derived observable collection
         // before it has any subscriptions, we bail out if this isn't
         // the case yet. This can happen when sync adds or replaces entries
@@ -199,8 +202,11 @@ export class Timeline {
         if (!this._localEntries?.hasSubscriptions) {
             return;
         }
-        // find any local relations to this new remote event
+        console.log('after')
-        for (const pee of this._localEntries) {
+        // find any local relations to these new remote events or maybe these
+        // new remote events reference one of the other new remote events we have.
+        const entryList = new ConcatList(entries, this._localEntries);
+        for (const pee of entryList) {
             // this will work because we set relatedEventId when removing remote echos
             if (pee.relatedEventId) {
                 const relationTarget = entries.find(e => e.id === pee.relatedEventId);

src/matrix/room/timeline/persistence/TimelineReader.js

@@ -54,6 +54,7 @@ async function readRawTimelineEntriesWithTxn(roomId, eventKey, direction, amount
         } else {
             eventsWithinFragment = await timelineStore.eventsBefore(roomId, eventKey, amount);
         }
+        console.log('readRawTimelineEntriesWithTxn eventsWithinFragment', eventsWithinFragment)
         let eventEntries = eventsWithinFragment.map(e => new EventEntry(e, fragmentIdComparer));
         entries = directionalConcat(entries, eventEntries, direction);
         // prepend or append eventsWithinFragment to entries, and wrap them in EventEntry

src/matrix/storage/idb/stores/TimelineEventStore.ts

@@ -40,20 +40,20 @@ interface TimelineEventEntry {
 
 type TimelineEventStorageEntry = TimelineEventEntry & { key: string, eventIdKey: string };
 
-function encodeKey(roomId: string, fragmentId: number, eventIndex: number): string {
+export function encodeKey(roomId: string, fragmentId: number, eventIndex: number): string {
     return `${roomId}|${encodeUint32(fragmentId)}|${encodeUint32(eventIndex)}`;
 }
 
-function decodeKey(key: string): { roomId: string, eventKey: EventKey } {
+export function decodeKey(key: string): { roomId: string, eventKey: EventKey } {
     const [roomId, fragmentId, eventIndex] = key.split("|");
     return {roomId, eventKey: new EventKey(decodeUint32(fragmentId), decodeUint32(eventIndex))};
 }
 
-function encodeEventIdKey(roomId: string, eventId: string): string {
+export function encodeEventIdKey(roomId: string, eventId: string): string {
     return `${roomId}|${eventId}`;
 }
 
-function decodeEventIdKey(eventIdKey: string): { roomId: string, eventId: string } {
+export function decodeEventIdKey(eventIdKey: string): { roomId: string, eventId: string } {
     const [roomId, eventId] = eventIdKey.split("|");
     return {roomId, eventId};
 }