From d631161a980f491c8ea96a71451d9426a3bd441c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?= Date: Wed, 17 Jun 2026 22:01:16 -0600 Subject: [PATCH] fix: Correct IMO UI options --- src/imo-ui.ts | 6 +++--- src/index.ts | 8 ++++---- src/main.ts | 4 ++-- src/private-types.ts | 11 ++++++++++- src/shared/options.ts | 44 ++++++++++++++++++++++++++----------------- 5 files changed, 46 insertions(+), 27 deletions(-) diff --git a/src/imo-ui.ts b/src/imo-ui.ts index 197403a..f203422 100644 --- a/src/imo-ui.ts +++ b/src/imo-ui.ts @@ -1,13 +1,13 @@ import { ensureGlobalCollageJs } from "@collagejs/core"; import { ensureImoController } from "./shared/common.js"; -import { getInitialImoUiOptions } from "./shared/options.js"; +import { getInitialImoUiFactoryOptions } from "./shared/options.js"; import { UiController } from "./UiController.js"; ensureGlobalCollageJs(); ensureImoController(); // @ts-expect-error TS2540 - ui property is declared as read-only. CollageJs.Imo.ui = new UiController(); -const imoUiOptions = await getInitialImoUiOptions(); -if (imoUiOptions.localStorageTrigger && localStorage.getItem(imoUiOptions.localStorageTrigger) === 'true') { +const imoUiOptions = await getInitialImoUiFactoryOptions(); +if (imoUiOptions.ui.localStorageTrigger && localStorage.getItem(imoUiOptions.ui.localStorageTrigger) === 'true') { CollageJs.Imo.ui.mount(); } diff --git a/src/index.ts b/src/index.ts index cd350b4..ac7279d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,16 +2,16 @@ import { buildPiece } from "@collagejs/svelte"; import Imo from "./lib/Imo.svelte"; import { cssMountFactory } from "@collagejs/vite-css/ex"; import type { ImoUiFactoryOptions } from "./types.js"; -import { getInitialImoUiOptions } from "./shared/options.js"; +import { getInitialImoUiFactoryOptions } from "./shared/options.js"; import { initImoUiOptions } from "./lib/state/imoUiOptions"; import type { CorePiece } from "@collagejs/core"; const cssMount = cssMountFactory('piece'); export async function imoUiFactory(options?: ImoUiFactoryOptions): Promise> { - const mountFn = options?.base ? cssMount.bind({ base: options.base }) : cssMount; - const initialOptions = await getInitialImoUiOptions(options?.ui); - initImoUiOptions(initialOptions); + const initialOptions = await getInitialImoUiFactoryOptions(options); + const mountFn = initialOptions?.base ? cssMount.bind({ base: initialOptions.base }) : cssMount; + initImoUiOptions(initialOptions.ui); const corePiece = buildPiece(Imo); return { mount: [mountFn, corePiece.mount], diff --git a/src/main.ts b/src/main.ts index 6ae71a2..51cc76e 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,9 +1,9 @@ import { mount } from 'svelte'; import App from './App.svelte'; -import { getInitialImoUiOptions } from './shared/options.js'; +import { getInitialImoUiFactoryOptions } from './shared/options.js'; import { initImoUiOptions } from './lib/state/imoUiOptions.js'; -initImoUiOptions(await getInitialImoUiOptions()); +initImoUiOptions((await getInitialImoUiFactoryOptions()).ui); const app = mount(App, { target: document.getElementById('app')!, diff --git a/src/private-types.ts b/src/private-types.ts index 8c9cc56..69550d0 100644 --- a/src/private-types.ts +++ b/src/private-types.ts @@ -1,5 +1,5 @@ import { type ImportMap } from "@collagejs/importmap"; -import type { GlassSettings, ImoUiOptions } from "./types.js"; +import type { GlassSettings, ImoUiFactoryOptions, ImoUiOptions } from "./types.js"; /** * Version of `ImoUiOptions` where every setting is a required setting. @@ -10,6 +10,15 @@ export type RequiredImoUiOptions = Required> & { */ glass: Required; } +/** + * Version of `ImoUiFactoryOptions` where every setting is a required setting. + */ +export type RequiredImoUiFactoryOptions = Required> & { + /** + * User interface options. + */ + 'ui': RequiredImoUiOptions; +}; /** * An entry in `@collagejs/imo`'s log. */ diff --git a/src/shared/options.ts b/src/shared/options.ts index ad06278..1e36fa1 100644 --- a/src/shared/options.ts +++ b/src/shared/options.ts @@ -1,7 +1,7 @@ import wjConfig from "wj-config"; -import type { RequiredImoUiOptions } from "../private-types.js"; +import type { RequiredImoUiFactoryOptions, RequiredImoUiOptions } from "../private-types.js"; import { skImoUiOptions } from "./storage-keys.js"; -import type { ImoUiOptions, ImPostingOptions } from "../types.js"; +import type { ImoUiFactoryOptions, ImPostingOptions } from "../types.js"; /** * Identifier used to tag IMO options. @@ -28,19 +28,23 @@ const defaultImPostingOptions: Required = { }; /** - * Default IMO UI options. + * Default IMO UI factory options. */ -export const defaultImoUiOptions: RequiredImoUiOptions = { - theme: 'system', - position: 'bottom-right', - language: 'en', - localStorageTrigger: 'imo-ui', - glass: { - enabled: true, - blur: 15, - opacity: 0.1, - saturation: 110, - }, +export const defaultImoUiFactoryOptions: RequiredImoUiFactoryOptions = { + base: '', + shadowDom: true, + ui: { + theme: 'system', + position: 'bottom-right', + language: 'en', + localStorageTrigger: 'imo-ui', + glass: { + enabled: true, + blur: 15, + opacity: 0.1, + saturation: 110, + }, + } }; /** @@ -79,14 +83,20 @@ export async function readImPostingOptions(): Promise * * The script is set by the `@collagejs/vite-im` Vite plug-in; the parameter carries the values given to the IMO UI * factory function. + * + * ### IMPORTANT + * + * These values are considered *initial* because, as the user interface is used and tweaked by the user/developer, + * settings are stored in local storage. Once a copy of the settings exist in local storage, these options are + * effectively superseded. * @param options Optional set of options that are merged last (and therefore has the highest priority). * @returns The final initial set of options for the IMO user interface. */ -export async function getInitialImoUiOptions(options?: ImoUiOptions): Promise { +export async function getInitialImoUiFactoryOptions(options?: ImoUiFactoryOptions): Promise { let optionsScript: HTMLElement | null; try { return await wjConfig() - .addObject(defaultImoUiOptions) + .addObject(defaultImoUiFactoryOptions) .addJson<{}>(() => Promise.resolve(optionsScript!.textContent)) .when(() => { optionsScript = document.querySelector(`script[type="application/json"][id="${imoUiOptionsId}"]`); @@ -97,7 +107,7 @@ export async function getInitialImoUiOptions(options?: ImoUiOptions): Promise