Complete Commonlib rc.6 integration and setup workflows

src/apps/browser/BrowserConfirm.ts

@@ -1,4 +1,5 @@
 import type { Confirm, ConfirmActionLayout } from "@vrtmrz/livesync-commonlib/compat/interfaces/Confirm";
+import { createNativeElement } from "@/apps/browserDom";
 
 import MessageBox from "./ui/MessageBox.svelte";
 import TextInputBox from "./ui/TextInputBox.svelte";
@@ -13,9 +14,9 @@ function displayMessageBox<T, U extends string[]>(
     buttons: U,
     title: string,
     commit: (ret: U[number]) => T,
-    actionLayout?: ConfirmActionLayout
+    actionLayout: ConfirmActionLayout = "vertical"
 ): Promise<T> {
-    const el = _activeDocument.createElement("div");
+    const el = createNativeElement(_activeDocument, "div");
     const p = promiseWithResolvers<T>();
     mount(MessageBox, {
         target: el,
@@ -42,7 +43,7 @@ function promptForInput(
     placeholder: string,
     isPassword?: boolean
 ): Promise<string | false> {
-    const el = _activeDocument.createElement("div");
+    const el = createNativeElement(_activeDocument, "div");
     const p = promiseWithResolvers<string | false>();
     mount(TextInputBox, {
         target: el,
@@ -103,12 +104,12 @@ export class BrowserConfirm<T extends ServiceContext> implements Confirm {
         const existing = _activeDocument.querySelector(`[data-livesync-popup="${CSS.escape(key)}"]`);
         existing?.remove();
 
-        const notice = _activeDocument.createElement("div");
+        const notice = createNativeElement(_activeDocument, "div");
         notice.className = "livesync-browser-notice";
         notice.dataset.livesyncPopup = key;
         const [beforeText, afterText] = dialogText.split("{HERE}", 2);
         notice.append(beforeText);
-        const anchor = _activeDocument.createElement("a");
+        const anchor = createNativeElement(_activeDocument, "a");
         anchor.href = "#";
         anchorCallback(anchor);
         anchor.addEventListener("click", () => notice.remove());

src/apps/browser/BrowserMenu.ts

@@ -1,4 +1,5 @@
 import { promiseWithResolvers, type PromiseWithResolvers } from "octagonal-wheels/promises";
+import { createNativeElement } from "@/apps/browserDom";
 import { mount } from "svelte";
 import MenuView from "./ui/MenuView.svelte";
 import { _activeDocument } from "@vrtmrz/livesync-commonlib/compat/common/coreEnvFunctions";
@@ -41,7 +42,7 @@ export class Menu {
     }
     waitingForClose?: PromiseWithResolvers<void>;
     showAtPosition(pos: { x: number; y: number }) {
-        const el = _activeDocument.createElement("div");
+        const el = createNativeElement(_activeDocument, "div");
         if (this.waitingForClose) {
             this.waitingForClose.resolve();
         }

src/apps/browser/BrowserSvelteDialogManager.ts

@@ -3,6 +3,7 @@ import {
     SvelteDialogManagerBase,
     SvelteDialogMixIn,
 } from "@vrtmrz/livesync-commonlib/compat/services/implements/base/SvelteDialog";
+import { createNativeElement } from "@/apps/browserDom";
 import type { ServiceContext } from "@vrtmrz/livesync-commonlib/context";
 import type { SvelteDialogManagerDependencies } from "@vrtmrz/livesync-commonlib/compat/services/implements/base/SvelteDialog";
 import { _activeDocument } from "@vrtmrz/livesync-commonlib/compat/common/coreEnvFunctions";
@@ -15,13 +16,13 @@ export class ShimModal {
     isOpen: boolean = false;
     baseEl: HTMLElement;
     constructor() {
-        const baseEl = _activeDocument.createElement("popup");
+        const baseEl = createNativeElement(_activeDocument, "popup");
         this.baseEl = baseEl;
-        this.contentEl = _activeDocument.createElement("div");
+        this.contentEl = createNativeElement(_activeDocument, "div");
         this.contentEl.className = "modal-content";
-        this.titleEl = _activeDocument.createElement("div");
+        this.titleEl = createNativeElement(_activeDocument, "div");
         this.titleEl.className = "modal-title";
-        this.modalEl = _activeDocument.createElement("div");
+        this.modalEl = createNativeElement(_activeDocument, "div");
         this.modalEl.className = "modal";
         this.modalEl.hidden = true;
         this.modalEl.appendChild(this.titleEl);

src/apps/browser/createLiveSyncBrowserServiceHub.ts

@@ -1,9 +1,10 @@
 import { BrowserServiceHub, type BrowserServiceHost } from "@vrtmrz/livesync-commonlib/compat/services/BrowserServices";
 import type { KeyValueDatabaseFactory } from "@vrtmrz/livesync-commonlib/compat/interfaces/KeyValueDatabase";
-import type { ServiceContext } from "@vrtmrz/livesync-commonlib/context";
+import { ServiceContext } from "@vrtmrz/livesync-commonlib/context";
 import { BrowserAPIService } from "@vrtmrz/livesync-commonlib/compat/services/implements/browser/BrowserAPIService";
 import { BrowserConfirm } from "./BrowserConfirm";
 import { LiveSyncBrowserUIService } from "./LiveSyncBrowserUIService";
+import { setLang, translateLiveSyncMessage } from "@/common/translation";
 
 export type LiveSyncBrowserServiceHubOptions<T extends ServiceContext> = {
     context?: T;
@@ -26,8 +27,11 @@ function createLiveSyncBrowserHost<T extends ServiceContext>(): BrowserServiceHo
 export function createLiveSyncBrowserServiceHub<T extends ServiceContext>(
     options: LiveSyncBrowserServiceHubOptions<T> = {}
 ): BrowserServiceHub<T> {
+    const context = options.context ?? (new ServiceContext({ translate: translateLiveSyncMessage }) as T);
     return new BrowserServiceHub<T>({
         ...options,
+        context,
+        onDisplayLanguageChanged: setLang,
         host: createLiveSyncBrowserHost<T>(),
     });
 }

src/apps/browser/createLiveSyncBrowserServiceHub.unit.spec.ts

@@ -15,8 +15,8 @@ describe("LiveSync browser service context contract", () => {
         });
         const hub = createLiveSyncBrowserServiceHub({ context });
 
-        expect(observeServiceContext(context, "message")).toEqual({
-            translation: "webapp:message",
+        expect(observeServiceContext(context, "moduleLocalDatabase.logWaitingForReady")).toEqual({
+            translation: "webapp:moduleLocalDatabase.logWaitingForReady",
             receivedEvents: ["context-contract-event"],
         });
         const composition = observeServiceComposition(hub, context);