refactor(Assets Path): set bqSVGBasePath when window and document o…

…bjects are available (#1238)
Endava · Aug 29, 2024 · 3dfb921 · 3dfb921
1 parent 423dcbd
commit 3dfb921
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 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
@@ -127,13 +127,13 @@ export const ExploreIcons: Story = {
         </span>
       </div>
       <bq-button class="m-be-xxl" appearance="primary" href="https://phosphoricons.com/" target="_blank">
-        <bq-icon name="binoculars" weight="fill" slot="prefix"></bq-icon>
+        <bq-icon name="binoculars-fill" slot="prefix"></bq-icon>
         Explore all the icons available
-        <bq-icon class="ms-m" name="caret-right" weight="regular" slot="suffix"></bq-icon>
+        <bq-icon class="ms-m" name="caret-right" slot="suffix"></bq-icon>
       </bq-button>
       <!-- Warning block -->
       <bq-alert class="m-be-l" type="warning" disable-close open>
-        <bq-icon name="warning" weight="fill" slot="icon"></bq-icon>
+        <bq-icon name="warning-fill" slot="icon"></bq-icon>
         Please notice
         <span slot="body">
           The SVG icons will be flipped horizontally when the <code>dir="rtl"</code> attribute is used.

diff --git 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('/');