Merge branch 'master' into madlittlemods/686-682-local-friendly-development-and-commonjs

doc/SDK.md

@@ -31,7 +31,8 @@ import {
     createNavigation,
     createRouter,
     RoomViewModel,
-    TimelineView
+    TimelineView,
+    viewClassForTile
 } from "hydrogen-view-sdk";
 import downloadSandboxPath from 'hydrogen-view-sdk/download-sandbox.html?url';
 import workerPath from 'hydrogen-view-sdk/main.js?url';
@@ -53,7 +54,7 @@ import "hydrogen-view-sdk/theme-element-light.css";
 async function main() {
     const app = document.querySelector<HTMLDivElement>('#app')!
     const config = {};
-    const platform = new Platform(app, assetPaths, config, { development: import.meta.env.DEV });
+    const platform = new Platform({container: app, assetPaths, config, options: { development: import.meta.env.DEV }});
     const navigation = createNavigation();
     platform.setNavigation(navigation);
     const urlRouter = createRouter({
@@ -88,7 +89,7 @@ async function main() {
             navigation,
         });
         await vm.load();
-        const view = new TimelineView(vm.timelineViewModel);
+        const view = new TimelineView(vm.timelineViewModel, viewClassForTile);
         app.appendChild(view.mount());
     }
 }

src/matrix/Client.js

@@ -132,14 +132,15 @@ export class Client {
         });
     }
 
-    async startRegistration(homeserver, username, password, initialDeviceDisplayName) {
+    async startRegistration(homeserver, username, password, initialDeviceDisplayName, flowSelector) {
         const request = this._platform.request;
         const hsApi = new HomeServerApi({homeserver, request});
         const registration = new Registration(hsApi, {
             username, 
             password,
             initialDeviceDisplayName,
-        });
+        },
+        flowSelector);
         return registration;
     }
 

src/platform/web/LegacyPlatform.js

@@ -19,6 +19,6 @@ import {hkdf} from "../../utils/crypto/hkdf";
 
 import {Platform as ModernPlatform} from "./Platform.js";
 
-export function Platform(container, assetPaths, config, options = null) {
+export function Platform({ container, assetPaths, config, configURL, options = null }) {
-    return new ModernPlatform(container, assetPaths, config, options, {aesjs, hkdf});
+    return new ModernPlatform({ container, assetPaths, config, configURL, options, cryptoExtras: { aesjs, hkdf }});
 }

src/platform/web/Platform.js

@@ -126,10 +126,11 @@ function adaptUIOnVisualViewportResize(container) {
 }
 
 export class Platform {
-    constructor(container, assetPaths, config, options = null, cryptoExtras = null) {
+    constructor({ container, assetPaths, config, configURL, options = null, cryptoExtras = null }) {
         this._container = container;
         this._assetPaths = assetPaths;
         this._config = config;
+        this._configURL = configURL;
         this.settingsStorage = new SettingsStorage("hydrogen_setting_v1_");
         this.clock = new Clock();
         this.encoding = new Encoding();
@@ -142,7 +143,7 @@ export class Platform {
             this._serviceWorkerHandler = new ServiceWorkerHandler();
             this._serviceWorkerHandler.registerAndStart(assetPaths.serviceWorker);
         }
-        this.notificationService = new NotificationService(this._serviceWorkerHandler, config.push);
+        this.notificationService = undefined;
         // Only try to use crypto when olm is provided
         if(this._assetPaths.olm) {
             this.crypto = new Crypto(cryptoExtras);
@@ -165,6 +166,20 @@ export class Platform {
         this._workerPromise = undefined;
     }
 
+    async init() {
+        if (!this._config) {
+            if (!this._configURL) {
+                throw new Error("Neither config nor configURL was provided!");
+            }
+            const {body}= await this.request(this._configURL, {method: "GET", format: "json", cache: true}).response();
+            this._config = body;
+        }
+        this.notificationService = new NotificationService(
+            this._serviceWorkerHandler,
+            this._config.push
+        );
+    }
+
     _createLogger(isDevelopment) {
         // Make sure that loginToken does not end up in the logs
         const transformer = (item) => {

src/platform/web/index.html

@@ -17,17 +17,17 @@
         <script id="main" type="module">
             import {main} from "./main";
             import {Platform} from "./Platform";
-            import configJSON from "./assets/config.json?raw";
+            import configURL from "./assets/config.json?url";
             import assetPaths from "./sdk/paths/vite";
             if (import.meta.env.PROD) {
                 assetPaths.serviceWorker = "sw.js";
             }
-            const platform = new Platform(
+            const platform = new Platform({
-                document.body,
+                container: document.body,
                 assetPaths,
-                JSON.parse(configJSON),
+                configURL, 
-                {development: import.meta.env.DEV}
+                options: {development: import.meta.env.DEV}
-            );
+            });
             main(platform);
         </script>
     </body>

src/platform/web/main.js

@@ -32,6 +32,7 @@ export async function main(platform) {
         // const recorder = new RecordRequester(createFetchRequest(clock.createTimeout));
         // const request = recorder.request;
         // window.getBrawlFetchLog = () => recorder.log();
+        await platform.init();
         const navigation = createNavigation();
         platform.setNavigation(navigation);
         const urlRouter = createRouter({navigation, history: platform.history});

src/platform/web/sw.js

@@ -92,8 +92,12 @@ function isCacheableThumbnail(url) {
 
 const baseURL = new URL(self.registration.scope);
 let pendingFetchAbortController = new AbortController();
+
 async function handleRequest(request) {
     try {
+        if (request.url.includes("config.json")) {
+            return handleConfigRequest(request);
+        }
         const url = new URL(request.url);
         // rewrite / to /index.html so it hits the cache
         if (url.origin === baseURL.origin && url.pathname === baseURL.pathname) {
@@ -119,6 +123,27 @@ async function handleRequest(request) {
     }
 }
 
+async function handleConfigRequest(request) {
+    let response = await readCache(request);
+    const networkResponsePromise = fetchAndUpdateConfig(request);
+    if (response) {
+        return response;
+    } else {
+        return await networkResponsePromise;
+    }
+}
+
+async function fetchAndUpdateConfig(request) {
+    const response = await fetch(request, {
+        signal: pendingFetchAbortController.signal,
+        headers: {
+            "Cache-Control": "no-cache",
+        },
+    });
+    updateCache(request, response.clone());
+    return response;
+}
+
 async function updateCache(request, response) {
     // don't write error responses to the cache
     if (response.status >= 400) {

src/platform/web/ui/general/TemplateView.ts

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { setAttribute, text, isChildren, classNames, TAG_NAMES, HTML_NS, ClassNames, Child} from "./html";
+import { setAttribute, text, isChildren, classNames, TAG_NAMES, HTML_NS, ClassNames, Child as NonBoundChild} from "./html";
 import {mountView} from "./utils";
 import {BaseUpdateView, IObservableValue} from "./BaseUpdateView";
 import {IMountArgs, ViewNode, IView} from "./types";
@@ -30,12 +30,15 @@ function objHasFns(obj: ClassNames<unknown>): obj is { [className: string]: bool
 }
 
 export type RenderFn<T> = (t: Builder<T>, vm: T) => ViewNode;
+type TextBinding<T> = (T) => string | number | boolean | undefined | null;
+type Child<T> = NonBoundChild | TextBinding<T>;
+type Children<T> = Child<T> | Child<T>[];
 type EventHandler = ((event: Event) => void);
 type AttributeStaticValue = string | boolean;
 type AttributeBinding<T> = (value: T) => AttributeStaticValue;
 export type AttrValue<T> = AttributeStaticValue | AttributeBinding<T> | EventHandler | ClassNames<T>;
 export type Attributes<T> = { [attribute: string]: AttrValue<T> };
-type ElementFn<T> = (attributes?: Attributes<T> | Child | Child[], children?: Child | Child[]) => Element;
+type ElementFn<T> = (attributes?: Attributes<T> | Children<T>, children?: Children<T>) => Element;
 export type Builder<T> = TemplateBuilder<T> & { [tagName in typeof TAG_NAMES[string][number]]: ElementFn<T> };
 
 /**
@@ -195,15 +198,15 @@ export class TemplateBuilder<T extends IObservableValue> {
         this._addAttributeBinding(node, "className", value => classNames(obj, value));
     }
 
-    _addTextBinding(fn: (value: T) => string): Text {
+    _addTextBinding(fn: (value: T) => ReturnType<TextBinding<T>>): Text {
-        const initialValue = fn(this._value);
+        const initialValue = fn(this._value)+"";
         const node = text(initialValue);
         let prevValue = initialValue;
         const binding = () => {
-            const newValue = fn(this._value);
+            const newValue = fn(this._value)+"";
             if (prevValue !== newValue) {
                 prevValue = newValue;
-                node.textContent = newValue+"";
+                node.textContent = newValue;
             }
         };
 
@@ -242,7 +245,7 @@ export class TemplateBuilder<T extends IObservableValue> {
         }
     }
 
-    _setNodeChildren(node: Element, children: Child | Child[]): void{
+    _setNodeChildren(node: Element, children: Children<T>): void{
         if (!Array.isArray(children)) {
             children = [children];
         }
@@ -276,14 +279,18 @@ export class TemplateBuilder<T extends IObservableValue> {
         return node;
     }
 
-    el(name: string, attributes?: Attributes<T> | Child | Child[], children?: Child | Child[]): ViewNode {
+    el(name: string, attributes?: Attributes<T> | Children<T>, children?: Children<T>): ViewNode {
         return this.elNS(HTML_NS, name, attributes, children);
     }
 
-    elNS(ns: string, name: string, attributes?: Attributes<T> | Child | Child[], children?: Child | Child[]): ViewNode {
+    elNS(ns: string, name: string, attributesOrChildren?: Attributes<T> | Children<T>, children?: Children<T>): ViewNode {
-        if (attributes !== undefined && isChildren(attributes)) {
+        let attributes: Attributes<T> | undefined;
-            children = attributes;
+        if (attributesOrChildren) {
-            attributes = undefined;
+            if (isChildren(attributesOrChildren)) {
+                children = attributesOrChildren as Children<T>;
+            } else {
+                attributes = attributesOrChildren as Attributes<T>;
+            }
         }
 
         const node = document.createElementNS(ns, name);

vite.common-config.js

@@ -31,6 +31,7 @@ const commonOptions = {
         assetsInlineLimit: 0,
         polyfillModulePreload: false,
     },
+    assetsInclude: ['**/config.json'],
     define: {
         DEFINE_VERSION: JSON.stringify(version),
         DEFINE_GLOBAL_HASH: JSON.stringify(null),

vite.config.js

@@ -14,6 +14,11 @@ export default defineConfig(({mode}) => {
             outDir: "../../../target",
             minify: true,
             sourcemap: true,
+            rollupOptions: {
+                output: {
+                    assetFileNames: (asset) => asset.name.includes("config.json") ? "assets/[name][extname]": "assets/[name].[hash][extname]",
+                },
+            },
         },
         plugins: [
             themeBuilder({