From 5402d5b3250bf131a8d7c424258e61dfadf58619 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= Date: Thu, 29 Aug 2024 15:21:08 +0300 Subject: [PATCH] refactor(Assets Path): set `bqSVGBasePath` in the global window object only when is available --- .../icon/_storybook/bq-icon.stories.tsx | 6 +-- packages/beeq/src/shared/utils/assetsPath.ts | 37 +++++++++++++------ 2 files changed, 28 insertions(+), 15 deletions(-) diff --git a/packages/beeq/src/components/icon/_storybook/bq-icon.stories.tsx b/packages/beeq/src/components/icon/_storybook/bq-icon.stories.tsx index 27f514984..1b8b8a4ec 100644 --- a/packages/beeq/src/components/icon/_storybook/bq-icon.stories.tsx +++ b/packages/beeq/src/components/icon/_storybook/bq-icon.stories.tsx @@ -127,13 +127,13 @@ export const ExploreIcons: Story = { - + Explore all the icons available - + - + Please notice The SVG icons will be flipped horizontally when the dir="rtl" attribute is used. diff --git a/packages/beeq/src/shared/utils/assetsPath.ts b/packages/beeq/src/shared/utils/assetsPath.ts index 6edf6050b..1fa43b0de 100644 --- a/packages/beeq/src/shared/utils/assetsPath.ts +++ b/packages/beeq/src/shared/utils/assetsPath.ts @@ -13,15 +13,23 @@ declare global { } } -Object.defineProperty(window, 'bqSVGBasePath', { - configurable: true, - enumerable: false, - writable: true, -}); +/** + * Define the `bqSVGBasePath` property on the global window object, but only when the window object is available. + */ +if (typeof window !== 'undefined') { + Object.defineProperty(window, 'bqSVGBasePath', { + configurable: true, + enumerable: false, + writable: true, + }); +} const DATA_BEEQ_ATTRIBUTE = 'data-beeq'; const DEFAULT_SVG_PATH = 'svg'; -const scripts = [...document.getElementsByTagName('script')] as HTMLScriptElement[]; +const scripts: HTMLScriptElement[] = + typeof document !== 'undefined' && document + ? ([...document.getElementsByTagName('script')] as HTMLScriptElement[]) + : []; /** * Sets the `bqSVGBasePath` in the global window object, @@ -30,8 +38,10 @@ const scripts = [...document.getElementsByTagName('script')] as HTMLScriptElemen * * @param path - The new base path to set. */ -export const setBasePath = (path: string) => { - window.bqSVGBasePath = path; +export const setBasePath = (path: string): void => { + if (typeof window !== 'undefined') { + window.bqSVGBasePath = path; + } }; /** @@ -40,7 +50,9 @@ export const setBasePath = (path: string) => { * @param subpath - The subpath to append to the base path. * @returns The full base path including the subpath. */ -export const getBasePath = (subpath = ''): string => { +export const getBasePath = (subpath = ''): string | undefined => { + if (typeof window === 'undefined') return undefined; + const { bqSVGBasePath } = window; if (!bqSVGBasePath) { initializeBasePath(); @@ -80,8 +92,9 @@ const formatBasePath = (subpath: string): string => { return window.bqSVGBasePath.replace(/\/$/, '') + formattedSubpath; }; -const findConfigScript = () => scripts.find((script) => script.hasAttribute(DATA_BEEQ_ATTRIBUTE)); +const findConfigScript = (): HTMLScriptElement => scripts.find((script) => script.hasAttribute(DATA_BEEQ_ATTRIBUTE)); -const findFallbackScript = () => scripts.find((script) => /beeq(\.esm)?\.js($|\?)/.test(script.src)); +const findFallbackScript = (): HTMLScriptElement => scripts.find((script) => /beeq(\.esm)?\.js($|\?)/.test(script.src)); -const getScriptPath = (script: HTMLScriptElement) => script.getAttribute('src').split('/').slice(0, -1).join('/'); +const getScriptPath = (script: HTMLScriptElement): string => + script.getAttribute('src').split('/').slice(0, -1).join('/');