fix: lazy initialization of the global KoliBri context (#5802)

public-ui · Dec 20, 2023 · 5ce0bdb · 5ce0bdb
2 parents a08888e + 7938202
commit 5ce0bdb
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 28 deletions.
diff --git 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
@@ -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,13 +12,13 @@ export const register = async (
 	loaders: LoaderCallback | LoaderCallback[] | Set<LoaderCallback>,
 	options?: RegisterOptions
 ): Promise<void[]> => {
-	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,
 		});
 	}
 	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
@@ -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<T>(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
@@ -115,16 +115,22 @@ const initMeta = (): void => {
 	}
 };
 
-const KoliBri: Record<string, unknown> = {};
-Object.defineProperty(window, 'KoliBri', {
-	get: function () {
-		return KoliBri;
-	},
-});
+const getKoliBri = (): Record<string, unknown> => {
+	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;
 			},