Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(Assets Path): set bqSVGBasePath when window and document objects are available #1238

Merged
merged 1 commit into from
Aug 29, 2024
Merged

refactor(Assets Path): set bqSVGBasePath when window and document objects are available #1238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/beeq/src/components/icon/_storybook/bq-icon.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
37 changes: 25 additions & 12 deletions packages/beeq/src/shared/utils/assetsPath.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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;
}
};

/**
Expand All @@ -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();
Expand Down Expand Up @@ -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('/');