diff --git a/.changeset/light-schools-buy.md b/.changeset/light-schools-buy.md new file mode 100644 index 00000000..fd6a0373 --- /dev/null +++ b/.changeset/light-schools-buy.md @@ -0,0 +1,6 @@ +--- +'@siemens/ix-icons': minor +--- + +- Improve logging include html element inside logging to identify which component creates the logging +- Update stencil version to 4.27.1 diff --git a/README.md b/README.md index 1dfcb441..bf3f9e83 100755 --- a/README.md +++ b/README.md @@ -12,9 +12,9 @@ SPDX-License-Identifier: MIT ## Usage -### Settng up with Siemens Industrial Experience design system +### Setting up with Siemens Industrial Experience design system -If you are also using the library [Siemens Industrial Experience](https://github.com/siemens/ix/), no additional project setup will be necessary. The packages `@siemens/ix-angular`, `@siemens/ix-react` or `@siemens/ix-vue` will take care of setting up the icon library for you. +If you are also using the library [Siemens Industrial Experience](https://github.com/siemens/ix/), no additional project setup will be necessary. The packages `@siemens/ix-angular`, `@siemens/ix-react` or `@siemens/ix-vue` will take care of setting up the icon library for you. ### Setting up without Siemens Industrial Experience design system diff --git a/package.json b/package.json index f6ed9657..42d875cb 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "ci:publish": "pnpm changeset publish" }, "dependencies": { - "@stencil/core": "^4.25.1" + "@stencil/core": "^4.27.1" }, "devDependencies": { "@changesets/changelog-github": "^0.5.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 75db3aa5..b4e47cc2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,8 +9,8 @@ importers: .: dependencies: '@stencil/core': - specifier: ^4.25.1 - version: 4.25.1 + specifier: ^4.27.1 + version: 4.27.1 devDependencies: '@changesets/changelog-github': specifier: ^0.5.0 @@ -23,7 +23,7 @@ importers: version: 1.50.0 '@stencil/sass': specifier: ^3.0.10 - version: 3.0.11(@stencil/core@4.25.1) + version: 3.0.11(@stencil/core@4.27.1) '@types/fs-extra': specifier: ^9.0.13 version: 9.0.13 @@ -436,8 +436,8 @@ packages: '@sinonjs/fake-timers@8.1.0': resolution: {integrity: sha512-OAPJUAtgeINhh/TAlUID4QTs53Njm7xzddaVlEs/SXwgtiD1tW22zAB/W1wdqfrpmikgaWQ9Fw6Ws+hsiRm5Vg==} - '@stencil/core@4.25.1': - resolution: {integrity: sha512-SJhAAN6nHj7l2n2F7H6NoOUFhXC5tYXSvOpAaNFi5As6c2jOvaDOvAH+om4OKmw8U2kHI9yihEqpZrtY1J20dQ==} + '@stencil/core@4.27.1': + resolution: {integrity: sha512-wJ+U3yJ9xSrME1PheHh8DnZrgFhjTlvF54mkA0tzTDXYdrEAYXIEAAeWbXx3munYX2Lqj3oDBEDsbsJNxDkwzA==} engines: {node: '>=16.0.0', npm: '>=7.10.0'} hasBin: true @@ -4333,11 +4333,11 @@ snapshots: dependencies: '@sinonjs/commons': 1.8.6 - '@stencil/core@4.25.1': {} + '@stencil/core@4.27.1': {} - '@stencil/sass@3.0.11(@stencil/core@4.25.1)': + '@stencil/sass@3.0.11(@stencil/core@4.27.1)': dependencies: - '@stencil/core': 4.25.1 + '@stencil/core': 4.27.1 '@tootallnate/once@1.1.2': {} diff --git a/src/components.d.ts b/src/components.d.ts index e251ee43..c4b255ce 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -15,6 +15,10 @@ export namespace Components { * Only fetch and parse svg data when icon is visible */ "lazyLoading": boolean; + /** + * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5. + */ + "lazy-loading"?: boolean; /** * Use one of our defined icon names e.g. `copy` https://ix.siemens.io/docs/icon-library/icons or the import variant ``` import { rocket } from '@siemens/ix-icons/icons'; ``` */ @@ -46,6 +50,10 @@ declare namespace LocalJSX { * Only fetch and parse svg data when icon is visible */ "lazyLoading"?: boolean; + /** + * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5. + */ + "lazy-loading"?: boolean; /** * Use one of our defined icon names e.g. `copy` https://ix.siemens.io/docs/icon-library/icons or the import variant ``` import { rocket } from '@siemens/ix-icons/icons'; ``` */ diff --git a/src/components/icon/parser.ts b/src/components/icon/parser.ts index f0ae5549..eac10efa 100644 --- a/src/components/icon/parser.ts +++ b/src/components/icon/parser.ts @@ -7,7 +7,7 @@ let parser: any = null; export const errorSymbol = "data:image/svg+xml;utf8,"; -export function parseSVGDataContent(content: string): string { +export function parseSVGDataContent(content: string, element?: HTMLElement): string { if (typeof window['DOMParser'] === 'undefined') { console.error('DOMParser not supported by your browser.'); return ''; @@ -21,7 +21,11 @@ export function parseSVGDataContent(content: string): string { const svgElement = svgDocument.querySelector('svg') as HTMLElement; if (!svgElement) { - console.error('No valid svg data provided'); + if (element) { + console.error('No valid svg data provided', element); + } else { + console.error('No valid svg data provided'); + } return ''; } diff --git a/src/components/icon/resolveIcon.ts b/src/components/icon/resolveIcon.ts index 85ccc005..cfbfea21 100644 --- a/src/components/icon/resolveIcon.ts +++ b/src/components/icon/resolveIcon.ts @@ -44,7 +44,7 @@ export const isSvgDataUrl = (url: string) => { return url.startsWith('data:image/svg+xml'); }; -async function fetchSVG(url: string) { +async function fetchSVG(url: string, element: HTMLIxIconElement) { const cache = getIconCacheMap(); if (cache.has(url)) { @@ -61,16 +61,16 @@ async function fetchSVG(url: string) { let svgContent = ''; if (response.ok) { - svgContent = parseSVGDataContent(responseText); + svgContent = parseSVGDataContent(responseText, element); cache.set(url, svgContent); } else { - console.error('Failed to request svg data from', url, 'with status code', response.status); + console.error('Failed to request svg data from', url, 'with status code', response.status, element); } return svgContent; }) .catch(() => { - console.error('Failed to fetch svg data:', url); + console.error('Failed to fetch svg data:', url, element); cache.set(url, ''); return ''; }) @@ -87,7 +87,7 @@ function isValidUrl(url: string) { return urlRegex.test(url); } -export function getIconUrl(name: string) { +export function getIconUrl(name: string, element: HTMLIxIconElement) { const customAssetUrl = getCustomAssetUrl(); if (customAssetUrl) { @@ -99,7 +99,7 @@ export function getIconUrl(name: string) { try { url = getAssetPath(url); } catch (error) { - console.warn(`Could not load icon with name "${name}". Ensure that the icon is registered using addIcons or that the icon SVG data is passed directly to the property.`); + console.warn(`Could not load icon with name "${name}". Ensure that the icon is registered using addIcons or that the icon SVG data is passed directly to property.`, element); } return url; @@ -112,13 +112,18 @@ export async function resolveIcon(element: HTMLIxIconElement, iconName?: string) } if (isSvgDataUrl(iconName)) { - return parseSVGDataContent(iconName); + const content = parseSVGDataContent(iconName, element); + + if (!content) { + console.error('Failed to parse icon data', element); + } + return content; } - return loadIcon(iconName); + return loadIcon(iconName, element); } -async function loadIcon(iconName: string): Promise { +async function loadIcon(iconName: string, element: HTMLIxIconElement): Promise { const cache = getIconCacheMap(); if (cache.has(iconName)) { @@ -126,16 +131,16 @@ async function loadIcon(iconName: string): Promise { } if (isValidUrl(iconName)) { - return fetchSVG(iconName); + return fetchSVG(iconName, element); } - const iconUrl = getIconUrl(iconName); + const iconUrl = getIconUrl(iconName, element); if (!iconUrl) { return ''; } - return fetchSVG(iconUrl); + return fetchSVG(iconUrl, element); } function removePrefix(name: string, prefix: string) { diff --git a/src/components/icon/test/resolveIcon.spec.ts b/src/components/icon/test/resolveIcon.spec.ts index 80570fad..c37ffccb 100644 --- a/src/components/icon/test/resolveIcon.spec.ts +++ b/src/components/icon/test/resolveIcon.spec.ts @@ -105,7 +105,7 @@ test('fill cache map if not loaded', async () => { const data = await resolveIcon(element, 'star'); expect(data).toBe(parseSVGDataContent(iconStar)); - expect(cacheMap.get(getIconUrl('star'))).toBe(parseSVGDataContent(iconStar)); + expect(cacheMap.get(getIconUrl('star', element))).toBe(parseSVGDataContent(iconStar)); }); test('preload custom icon', async () => { @@ -115,7 +115,7 @@ test('preload custom icon', async () => { const cacheMap = getIconCacheMap(); cacheMap.clear(); - cacheMap.set(getIconUrl('star'), 'Test'); + cacheMap.set(getIconUrl('star', element), 'Test'); const data = await resolveIcon(element, 'star'); expect(data).toBe('Test');