feat: update stencil version and improve logging

.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

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
 

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",

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';  <ix-icon name={rocket}></ix-icon> ```
          */
@@ -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';  <ix-icon name={rocket}></ix-icon> ```
          */

src/components/icon/parser.ts

@@ -7,7 +7,7 @@ let parser: any = null;
 export const errorSymbol =
   "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'><path fill-rule='evenodd' d='M384,0 L384,384 L0,384 L0,0 L384,0 Z M192,207.085 L57.751,341.333 L326.248,341.333 L192,207.085 Z M42.666,57.751 L42.666,326.248 L176.915,192 L42.666,57.751 Z M341.333,57.751 L207.085,192 L341.333,326.248 L341.333,57.751 Z M326.248,42.666 L57.751,42.666 L192,176.915 L326.248,42.666 Z' transform='translate(64 64)'/></svg>";
 
-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 '';
   }
 

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,30 +112,35 @@ 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<string> {
+async function loadIcon(iconName: string, element: HTMLIxIconElement): Promise<string> {
   const cache = getIconCacheMap();
 
   if (cache.has(iconName)) {
     return cache.get(iconName)!;
   }
 
   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) {

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'), '<svg>Test</svg>');
+  cacheMap.set(getIconUrl('star', element), '<svg>Test</svg>');
 
   const data = await resolveIcon(element, 'star');
   expect(data).toBe('<svg>Test</svg>');