From 370dfc9de9ad2d191262d08c90bec12da6c0d90b Mon Sep 17 00:00:00 2001 From: Peter Laske <37439758+laske185@users.noreply.github.com> Date: Wed, 20 Dec 2023 09:29:16 +0100 Subject: [PATCH] fix: lazy initialization of the global KoliBri context Closes: #5795 --- .../src/components/modal/component.tsx | 8 ++--- packages/components/src/core/index.ts | 8 ++--- packages/components/src/global/devtools.ts | 4 +-- packages/components/src/utils/dev.utils.ts | 35 +++++++++---------- 4 files changed, 27 insertions(+), 28 deletions(-) diff --git a/packages/components/src/components/modal/component.tsx b/packages/components/src/components/modal/component.tsx index ef9f191b4c..a565d0cd50 100644 --- a/packages/components/src/components/modal/component.tsx +++ b/packages/components/src/components/modal/component.tsx @@ -4,7 +4,7 @@ import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core'; import { KoliBriModalEventCallbacks } from '../../types/modal'; import { LabelPropType, validateLabel } from '../../types/props/label'; import { featureHint } from '../../utils/a11y.tipps'; -import { KoliBri } from '../../utils/dev.utils'; +import { getKoliBri } from '../../utils/dev.utils'; import { setState, watchString, watchValidator } from '../../utils/prop.validators'; import { ModalService } from './service'; import { API, States } from './types'; @@ -30,16 +30,16 @@ export class KolModal implements API { public componentDidRender(): void { if (this.hostElement /* SSR instanceof HTMLElement */) { if (this.state._activeElement /* SSR instanceof HTMLElement */) { - (KoliBri.Modal as ModalService).openModal(this.hostElement, this.state._activeElement); + (getKoliBri().Modal as ModalService).openModal(this.hostElement, this.state._activeElement); } else { - (KoliBri.Modal as ModalService).closeModal(this.hostElement); + (getKoliBri().Modal as ModalService).closeModal(this.hostElement); } } } public disconnectedCallback(): void { if (this.hostElement /* SSR instanceof HTMLElement */) { - (KoliBri.Modal as ModalService).closeModal(this.hostElement); + (getKoliBri().Modal as ModalService).closeModal(this.hostElement); } } diff --git a/packages/components/src/core/index.ts b/packages/components/src/core/index.ts index a65f3ce4ce..d32422dbfe 100644 --- a/packages/components/src/core/index.ts +++ b/packages/components/src/core/index.ts @@ -2,7 +2,7 @@ import type { Generic, LoaderCallback, RegisterOptions } from 'adopted-style-she import { register as coreRegister } from 'adopted-style-sheets'; import { I18nextService, II18nService } from './i18n'; -import { KoliBri } from '../utils/dev.utils'; +import { getKoliBri } from '../utils/dev.utils'; export const register = async ( themes: @@ -12,8 +12,8 @@ export const register = async ( loaders: LoaderCallback | LoaderCallback[] | Set, options?: RegisterOptions ): Promise => { - if (KoliBri.I18n === undefined) { - Object.defineProperty(KoliBri, 'I18n', { + if (getKoliBri().I18n === undefined) { + Object.defineProperty(getKoliBri(), 'I18n', { value: await I18nextService.createInstance(options?.translation?.name ?? 'de', options?.translations), writable: false, }); @@ -21,4 +21,4 @@ export const register = async ( return await coreRegister(themes, loaders, options); }; -export const getI18nService: () => II18nService | undefined = () => KoliBri.I18n as II18nService; +export const getI18nService: () => II18nService | undefined = () => getKoliBri().I18n as II18nService; diff --git a/packages/components/src/global/devtools.ts b/packages/components/src/global/devtools.ts index 79f99cbfbb..a79bb6f23b 100644 --- a/packages/components/src/global/devtools.ts +++ b/packages/components/src/global/devtools.ts @@ -1,4 +1,4 @@ -import { getColorContrastAnalysis, getDevMode, getDocument, getExperimentalMode, initKoliBri, KoliBri, Log, renderDevAdvice } from '../utils/dev.utils'; +import { Log, getColorContrastAnalysis, getDevMode, getDocument, getExperimentalMode, getKoliBri, initKoliBri, renderDevAdvice } from '../utils/dev.utils'; import { koliBriA11yColorContrast, koliBriQuerySelector, @@ -11,7 +11,7 @@ import { function prototypeKoliBri(name: string, cb: T) { try { - Object.defineProperty(KoliBri, name, { + Object.defineProperty(getKoliBri(), name, { get: function () { return cb; }, diff --git a/packages/components/src/utils/dev.utils.ts b/packages/components/src/utils/dev.utils.ts index 3c8f18553d..d3cdba0e05 100644 --- a/packages/components/src/utils/dev.utils.ts +++ b/packages/components/src/utils/dev.utils.ts @@ -115,16 +115,22 @@ const initMeta = (): void => { } }; -const KoliBri: Record = {}; -Object.defineProperty(window, 'KoliBri', { - get: function () { - return KoliBri; - }, -}); +const getKoliBri = (): Record => { + let kolibri = getWindow().KoliBri; + if (kolibri === undefined) { + kolibri = {}; + Object.defineProperty(getWindow(), 'KoliBri', { + value: kolibri, + writable: false, + }); + } + return kolibri; +}; + export const initKoliBri = (): void => { - if (KoliBri.Modal === undefined) { + if (getKoliBri().Modal === undefined) { const Modal = new ModalService(); - Object.defineProperty(KoliBri, 'Modal', { + Object.defineProperty(getKoliBri(), 'Modal', { get: function (): ModalService { return Modal; }, @@ -147,18 +153,11 @@ export const initKoliBri = (): void => { console.warn(`You can only initialize KoliBri once.`); } }; -export { KoliBri }; +export { getKoliBri }; export const renderDevAdvice = (): void => { - if (getWindow().KoliBri === undefined) { - Object.defineProperty(window, 'KoliBri', { - get: function () { - return KoliBri; - }, - }); - } - if (KoliBri.adviceShown !== true) { - Object.defineProperty(KoliBri, 'adviceShown', { + if (getKoliBri().adviceShown !== true) { + Object.defineProperty(getKoliBri(), 'adviceShown', { get: function () { return true; },