From 2ba9aaec7096eedaddd6ce19bd59e6d412433fae Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Fri, 12 Jul 2024 14:33:46 +0200 Subject: [PATCH 01/14] feat: add legacy cache map --- src/components/icon/meta-tag.ts | 33 ----------- src/components/icon/resolveIcon.ts | 44 ++------------- src/components/icon/test/resolveIcon.spec.ts | 58 +++++++++++++++----- src/index.html | 1 - src/index.ts | 1 + src/legacy-support.ts | 34 ++++++++++++ 6 files changed, 84 insertions(+), 87 deletions(-) create mode 100644 src/legacy-support.ts diff --git a/src/components/icon/meta-tag.ts b/src/components/icon/meta-tag.ts index a68516b..23f37c3 100644 --- a/src/components/icon/meta-tag.ts +++ b/src/components/icon/meta-tag.ts @@ -1,20 +1,6 @@ /* * COPYRIGHT (c) Siemens AG 2018-2024 ALL RIGHTS RESERVED. */ - -function getV3PreviewMetaElement() { - return document.querySelector("meta[name='ix-icons:v3-preview']"); -} - -function getV3PreviewMetaContent() { - const v3PreviewMetaElement = getV3PreviewMetaElement(); - if (v3PreviewMetaElement) { - return v3PreviewMetaElement.getAttribute('content').split(';'); - } - - return null; -} - /** * Provide custom SVG path for icons * @@ -29,22 +15,3 @@ export function getCustomAssetUrl() { return false; } - -/** - * Enable v3 preview features - * - * - */ -export function isV3PreviewEnabled() { - const features = getV3PreviewMetaContent(); - - if (!features) { - return false; - } - - if (features.includes('svg-path-loading')) { - return true; - } - - return false; -} diff --git a/src/components/icon/resolveIcon.ts b/src/components/icon/resolveIcon.ts index 9a859d4..a515d6a 100644 --- a/src/components/icon/resolveIcon.ts +++ b/src/components/icon/resolveIcon.ts @@ -7,7 +7,7 @@ * LICENSE file in the root directory of this source tree. */ import { getAssetPath } from '@stencil/core'; -import { getCustomAssetUrl, isV3PreviewEnabled } from './meta-tag'; +import { getCustomAssetUrl } from './meta-tag'; declare global { interface Window { @@ -19,25 +19,6 @@ let fetchCache: Map; const requests = new Map>(); let parser = null; -function toCamelCase(value: string) { - value = value.replace(/[\(\)\[\]\{\}\=\?\!\.\:,\-_\+\\\"#~\/]/g, ' '); - let returnValue = ''; - let makeNextUppercase = true; - value = value.toLowerCase(); - for (let i = 0; value.length > i; i++) { - let c = value.charAt(i); - if (c.match(/^\s+$/g) || c.match(/[\(\)\[\]\{\}\\\/]/g)) { - makeNextUppercase = true; - } else if (makeNextUppercase) { - c = c.toUpperCase(); - makeNextUppercase = false; - } - returnValue += c; - } - const normalized = returnValue.replace(/\s+/g, ''); - return normalized.charAt(0).toUpperCase() + normalized.slice(1); -} - export const getIconCacheMap = (): Map => { if (typeof window === 'undefined') { return new Map(); @@ -116,7 +97,7 @@ function isValidUrl(url: string) { return urlRegex.test(url); } -function getAssetUrl(name: string) { +export function getAssetUrl(name: string) { const customAssetUrl = getCustomAssetUrl(); if (customAssetUrl) { return `${customAssetUrl}/${name}.svg`; @@ -125,14 +106,6 @@ function getAssetUrl(name: string) { return getAssetPath(`svg/${name}.svg`); } -async function getESMIcon(name: string) { - const esmIcon = await import('./icons'); - let iconName = toCamelCase(name); - iconName = `icon${iconName}`; - - return parseSVGDataContent(esmIcon[iconName]); -} - export async function resolveIcon(iconName: string) { if (!iconName) { throw Error('No icon name provided'); @@ -150,14 +123,9 @@ export async function resolveIcon(iconName: string) { } } - if (isV3PreviewEnabled()) { - console.warn('Using V3 preview feature for loading icons.'); - try { - return fetchSVG(getAssetUrl(iconName)); - } catch (error) { - throw Error('Cannot resolve any icon'); - } + try { + return fetchSVG(getAssetUrl(iconName)); + } catch (error) { + throw Error('Cannot resolve any icon'); } - - return getESMIcon(iconName); } diff --git a/src/components/icon/test/resolveIcon.spec.ts b/src/components/icon/test/resolveIcon.spec.ts index 450ee4a..5923793 100644 --- a/src/components/icon/test/resolveIcon.spec.ts +++ b/src/components/icon/test/resolveIcon.spec.ts @@ -1,8 +1,9 @@ /* * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED. */ -import * as metaTag from './../meta-tag'; -import { resolveIcon } from '../resolveIcon'; +import { preloadIconMap } from '../../../legacy-support'; +import { iconStar } from '../icons'; +import { resolveIcon, getIconCacheMap, getAssetUrl, parseSVGDataContent } from '../resolveIcon'; const exampleSvg = ` @@ -28,6 +29,14 @@ jest.mock('../icons', () => ({ })); let fetch = (global.fetch = jest.fn((url: string) => { console.log(url); + + if (url === '/svg/star.svg') { + return Promise.resolve({ + text: () => Promise.resolve(iconStar), + ok: true, + }); + } + if (url === '/svg/bulb.svg') { return Promise.resolve({ text: () => Promise.resolve(exampleSvg), @@ -56,19 +65,7 @@ describe('resolve icon', () => { }); it('should resolve svg from name', async () => { - const icon = 'star'; - const data = await resolveIcon(icon); - - expect(data).toBe( - ` add `, - ); - }); - - it('resolve by v3 preview feature flat', async () => { - (metaTag as any).isV3PreviewEnabled = jest.fn(() => true); - - const icon = 'bulb'; - const data = await resolveIcon(icon); + const data = await resolveIcon('bulb'); expect(data).toBe( ` add `, @@ -89,3 +86,34 @@ describe('resolve icon', () => { await expect(resolveIcon(icon)).rejects.toThrow('No valid svg data provided'); }); }); + +test('preload icon map', async () => { + fetch.mockClear(); + + const cacheMap = getIconCacheMap(); + cacheMap.clear(); + + preloadIconMap(); + expect(cacheMap.size).toBeGreaterThan(0); + + const data = await resolveIcon('bulb'); + + expect(fetch).not.toHaveBeenCalled(); + expect(data).toBe( + ` add `, + ); +}); + +test('fill cache map if not loaded', async () => { + fetch.mockClear(); + + const cacheMap = getIconCacheMap(); + cacheMap.clear(); + + expect(cacheMap.size).toBe(0); + + const data = await resolveIcon('star'); + + expect(data).toBe(parseSVGDataContent(iconStar)); + expect(cacheMap.get(getAssetUrl('star'))).toBe(parseSVGDataContent(iconStar)); +}); diff --git a/src/index.html b/src/index.html index 4da018d..e02ddf7 100644 --- a/src/index.html +++ b/src/index.html @@ -4,7 +4,6 @@ Stencil Component Starter - diff --git a/src/index.ts b/src/index.ts index 2467c26..26e7e0d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,2 +1,3 @@ export type { Components, JSX } from './components'; export * from './components/icon/icon'; +export { preloadIconMap } from './legacy-support'; diff --git a/src/legacy-support.ts b/src/legacy-support.ts new file mode 100644 index 0000000..69fd6a0 --- /dev/null +++ b/src/legacy-support.ts @@ -0,0 +1,34 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import * as icons from './components/icon/icons'; +import { getIconCacheMap, parseSVGDataContent } from './components/icon/resolveIcon'; + +function fromCamelToKebabCase(camelString: string): string { + let kebabString = ''; + for (const char of camelString) { + if (char.toUpperCase() === char) { + kebabString += '-' + char.toLowerCase(); + } else { + kebabString += char; + } + } + if (kebabString.startsWith('-')) { + kebabString = kebabString.slice(1); + } + return kebabString; +} + +export function preloadIconMap() { + const iconsCache = getIconCacheMap(); + Object.keys(icons).forEach(key => { + const fileName = fromCamelToKebabCase(key.substring('icon'.length)); + const icon = icons[key]; + iconsCache.set(`/build/svg/${fileName}.svg`, parseSVGDataContent(icon)); + }); +} From 2fa9b9aeb2cac1d96e21f101cc216a0cda52989c Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Fri, 12 Jul 2024 15:28:44 +0200 Subject: [PATCH 02/14] fix asset path --- src/index.ts | 1 + src/legacy-support.ts | 15 +++++++++++++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/index.ts b/src/index.ts index 26e7e0d..0b3bdce 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,4 @@ export type { Components, JSX } from './components'; export * from './components/icon/icon'; export { preloadIconMap } from './legacy-support'; +export { setAssetPath } from '@stencil/core'; diff --git a/src/legacy-support.ts b/src/legacy-support.ts index 69fd6a0..4d1871d 100644 --- a/src/legacy-support.ts +++ b/src/legacy-support.ts @@ -6,8 +6,9 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ +import { setAssetPath } from '@stencil/core'; import * as icons from './components/icon/icons'; -import { getIconCacheMap, parseSVGDataContent } from './components/icon/resolveIcon'; +import { getIconCacheMap, parseSVGDataContent, getAssetUrl } from './components/icon/resolveIcon'; function fromCamelToKebabCase(camelString: string): string { let kebabString = ''; @@ -29,6 +30,16 @@ export function preloadIconMap() { Object.keys(icons).forEach(key => { const fileName = fromCamelToKebabCase(key.substring('icon'.length)); const icon = icons[key]; - iconsCache.set(`/build/svg/${fileName}.svg`, parseSVGDataContent(icon)); + + let url: string = ''; + try { + url = getAssetUrl(fileName); + } catch (error) { + setAssetPath(`${window.location.origin}/`); + } finally { + url = getAssetUrl(fileName); + } + + iconsCache.set(url, parseSVGDataContent(icon)); }); } From 01d9c9648aa729e95dff589017a4fef556420b59 Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Mon, 29 Jul 2024 08:52:03 +0200 Subject: [PATCH 03/14] changelog --- .changeset/little-baboons-cry.md | 5 +++++ BREAKING_CHANGES.md | 22 ++++++++++++++++++++ src/components/icon/test/resolveIcon.spec.ts | 16 +++++++++++++- 3 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 .changeset/little-baboons-cry.md diff --git a/.changeset/little-baboons-cry.md b/.changeset/little-baboons-cry.md new file mode 100644 index 0000000..1d4f0db --- /dev/null +++ b/.changeset/little-baboons-cry.md @@ -0,0 +1,5 @@ +--- +'@siemens/ix-icons': major +--- + +feat: remove prebundled icons diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md index 1d1af96..f43fe51 100644 --- a/BREAKING_CHANGES.md +++ b/BREAKING_CHANGES.md @@ -1,3 +1,25 @@ +# v3.0.0 + +## Loading icon svg as external resource + +Previously all icons were bundled inside the icon package itself. We choose this way to provide a easy setup without any additional configurations. +The downside of this implementation results in a increasing bundle size. + +With release of main library @siemens/ix and @siemens/ix-icons you have to provide the icons as a static resource. This makes the bundle size significant smaller. + +### Active legacy support + +If you are still depend on the preloaded icons you can still active this behavior by executing `preloadIconMap` function BEFORE any icon is loaded/displayed. + +```ts +import { preloadIconMap } from '@siemens/ix-icons'; + +preloadIconMap(); + +// Bootstrap your application afterwards + +``` + # v2.0.0 Icon web fonts are removed. \ No newline at end of file diff --git a/src/components/icon/test/resolveIcon.spec.ts b/src/components/icon/test/resolveIcon.spec.ts index 5923793..9af88a0 100644 --- a/src/components/icon/test/resolveIcon.spec.ts +++ b/src/components/icon/test/resolveIcon.spec.ts @@ -1,6 +1,7 @@ /* * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED. */ +import { setAssetPath } from '../../../index'; import { preloadIconMap } from '../../../legacy-support'; import { iconStar } from '../icons'; import { resolveIcon, getIconCacheMap, getAssetUrl, parseSVGDataContent } from '../resolveIcon'; @@ -98,9 +99,10 @@ test('preload icon map', async () => { const data = await resolveIcon('bulb'); + expect(cacheMap.size).toBeGreaterThan(0); expect(fetch).not.toHaveBeenCalled(); expect(data).toBe( - ` add `, + '', ); }); @@ -117,3 +119,15 @@ test('fill cache map if not loaded', async () => { expect(data).toBe(parseSVGDataContent(iconStar)); expect(cacheMap.get(getAssetUrl('star'))).toBe(parseSVGDataContent(iconStar)); }); + +test('preload custom icon', async () => { + fetch.mockClear(); + + const cacheMap = getIconCacheMap(); + cacheMap.clear(); + + cacheMap.set(getAssetUrl('star'), 'Test'); + + const data = await resolveIcon('star'); + expect(data).toBe('Test'); +}); From 6578d0191b1918adb65db426122cf38cd2e8f3e7 Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Mon, 29 Jul 2024 08:52:25 +0200 Subject: [PATCH 04/14] remove import --- src/components/icon/test/resolveIcon.spec.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/icon/test/resolveIcon.spec.ts b/src/components/icon/test/resolveIcon.spec.ts index 9af88a0..4ebaa1f 100644 --- a/src/components/icon/test/resolveIcon.spec.ts +++ b/src/components/icon/test/resolveIcon.spec.ts @@ -1,7 +1,6 @@ /* * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED. */ -import { setAssetPath } from '../../../index'; import { preloadIconMap } from '../../../legacy-support'; import { iconStar } from '../icons'; import { resolveIcon, getIconCacheMap, getAssetUrl, parseSVGDataContent } from '../resolveIcon'; From c0c952426a5d94c15a02686924bfe2e4cae36f0f Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Mon, 29 Jul 2024 11:46:07 +0200 Subject: [PATCH 05/14] remove legacy code part --- BREAKING_CHANGES.md | 13 ------ src/components/icon/test/resolveIcon.spec.ts | 20 +-------- src/index.ts | 1 - src/legacy-support.ts | 45 -------------------- 4 files changed, 1 insertion(+), 78 deletions(-) delete mode 100644 src/legacy-support.ts diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md index f43fe51..e657d76 100644 --- a/BREAKING_CHANGES.md +++ b/BREAKING_CHANGES.md @@ -7,19 +7,6 @@ The downside of this implementation results in a increasing bundle size. With release of main library @siemens/ix and @siemens/ix-icons you have to provide the icons as a static resource. This makes the bundle size significant smaller. -### Active legacy support - -If you are still depend on the preloaded icons you can still active this behavior by executing `preloadIconMap` function BEFORE any icon is loaded/displayed. - -```ts -import { preloadIconMap } from '@siemens/ix-icons'; - -preloadIconMap(); - -// Bootstrap your application afterwards - -``` - # v2.0.0 Icon web fonts are removed. \ No newline at end of file diff --git a/src/components/icon/test/resolveIcon.spec.ts b/src/components/icon/test/resolveIcon.spec.ts index 4ebaa1f..5408e63 100644 --- a/src/components/icon/test/resolveIcon.spec.ts +++ b/src/components/icon/test/resolveIcon.spec.ts @@ -1,7 +1,7 @@ /* * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED. */ -import { preloadIconMap } from '../../../legacy-support'; +import { preloadIconMap } from '../../../legacy/legacy-support'; import { iconStar } from '../icons'; import { resolveIcon, getIconCacheMap, getAssetUrl, parseSVGDataContent } from '../resolveIcon'; const exampleSvg = ` @@ -87,24 +87,6 @@ describe('resolve icon', () => { }); }); -test('preload icon map', async () => { - fetch.mockClear(); - - const cacheMap = getIconCacheMap(); - cacheMap.clear(); - - preloadIconMap(); - expect(cacheMap.size).toBeGreaterThan(0); - - const data = await resolveIcon('bulb'); - - expect(cacheMap.size).toBeGreaterThan(0); - expect(fetch).not.toHaveBeenCalled(); - expect(data).toBe( - '', - ); -}); - test('fill cache map if not loaded', async () => { fetch.mockClear(); diff --git a/src/index.ts b/src/index.ts index 0b3bdce..df11feb 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,3 @@ export type { Components, JSX } from './components'; export * from './components/icon/icon'; -export { preloadIconMap } from './legacy-support'; export { setAssetPath } from '@stencil/core'; diff --git a/src/legacy-support.ts b/src/legacy-support.ts deleted file mode 100644 index 4d1871d..0000000 --- a/src/legacy-support.ts +++ /dev/null @@ -1,45 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2024 Siemens AG - * - * SPDX-License-Identifier: MIT - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ -import { setAssetPath } from '@stencil/core'; -import * as icons from './components/icon/icons'; -import { getIconCacheMap, parseSVGDataContent, getAssetUrl } from './components/icon/resolveIcon'; - -function fromCamelToKebabCase(camelString: string): string { - let kebabString = ''; - for (const char of camelString) { - if (char.toUpperCase() === char) { - kebabString += '-' + char.toLowerCase(); - } else { - kebabString += char; - } - } - if (kebabString.startsWith('-')) { - kebabString = kebabString.slice(1); - } - return kebabString; -} - -export function preloadIconMap() { - const iconsCache = getIconCacheMap(); - Object.keys(icons).forEach(key => { - const fileName = fromCamelToKebabCase(key.substring('icon'.length)); - const icon = icons[key]; - - let url: string = ''; - try { - url = getAssetUrl(fileName); - } catch (error) { - setAssetPath(`${window.location.origin}/`); - } finally { - url = getAssetUrl(fileName); - } - - iconsCache.set(url, parseSVGDataContent(icon)); - }); -} From 51f1dae5a0a4739b0d6704c60341eb3cd5ffc674 Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Mon, 29 Jul 2024 11:54:33 +0200 Subject: [PATCH 06/14] fix import path --- src/components/icon/test/resolveIcon.spec.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/icon/test/resolveIcon.spec.ts b/src/components/icon/test/resolveIcon.spec.ts index 5408e63..a804b1f 100644 --- a/src/components/icon/test/resolveIcon.spec.ts +++ b/src/components/icon/test/resolveIcon.spec.ts @@ -1,7 +1,6 @@ /* * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED. */ -import { preloadIconMap } from '../../../legacy/legacy-support'; import { iconStar } from '../icons'; import { resolveIcon, getIconCacheMap, getAssetUrl, parseSVGDataContent } from '../resolveIcon'; const exampleSvg = ` From 665d2809c13e0abd1fd8ff00d1b44d6f348fd26b Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Fri, 16 Aug 2024 11:18:23 +0200 Subject: [PATCH 07/14] fix: remove comment --- src/components/icon/meta-tag.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/icon/meta-tag.ts b/src/components/icon/meta-tag.ts index 23f37c3..868d2fa 100644 --- a/src/components/icon/meta-tag.ts +++ b/src/components/icon/meta-tag.ts @@ -1,6 +1,3 @@ -/* - * COPYRIGHT (c) Siemens AG 2018-2024 ALL RIGHTS RESERVED. - */ /** * Provide custom SVG path for icons * From f4f871cec912370a9f0b66cfb4cf699a4e9a3dd2 Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Tue, 27 Aug 2024 11:35:50 +0200 Subject: [PATCH 08/14] fix: expose all asset utils --- src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index df11feb..0865635 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,3 @@ export type { Components, JSX } from './components'; export * from './components/icon/icon'; -export { setAssetPath } from '@stencil/core'; +export { setAssetPath, getAssetPath } from '@stencil/core'; From 1cd2c3df72fb45bee9fcb5358211b57f08f6f169 Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Tue, 27 Aug 2024 13:43:25 +0200 Subject: [PATCH 09/14] fix: remove commonjs support --- .gitignore | 1 + package.json | 5 +++-- src/index.ts | 2 +- stencil.config.ts | 1 + 4 files changed, 6 insertions(+), 3 deletions(-) diff --git a/.gitignore b/.gitignore index 6879500..e965149 100755 --- a/.gitignore +++ b/.gitignore @@ -40,3 +40,4 @@ icons/ /playwright-report/ /playwright/.cache/ /svg +/components diff --git a/package.json b/package.json index b72ab1c..96292a2 100644 --- a/package.json +++ b/package.json @@ -20,11 +20,12 @@ "module": "dist/index.js", "es2015": "dist/esm/index.mjs", "es2017": "dist/esm/index.mjs", - "types": "dist/types/index.d.ts", + "jsnext:main": "dist/esm/index.js", + "types": "dist/types/interfaces.d.ts", "collection": "dist/collection/collection-manifest.json", "collection:main": "dist/collection/index.js", - "unpkg": "dist/ix-icons/ix-icons.esm.js", "files": [ + "components/", "dist/", "loader/", "icons/", diff --git a/src/index.ts b/src/index.ts index 0865635..df11feb 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,3 @@ export type { Components, JSX } from './components'; export * from './components/icon/icon'; -export { setAssetPath, getAssetPath } from '@stencil/core'; +export { setAssetPath } from '@stencil/core'; diff --git a/stencil.config.ts b/stencil.config.ts index e7e8137..31cbcc3 100644 --- a/stencil.config.ts +++ b/stencil.config.ts @@ -21,6 +21,7 @@ export const config: Config = { }, { type: 'dist-custom-elements', + dir: './components', }, { type: 'www', From 1694646623d30b4b6ea4bb7efa1e1a530e1152eb Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Tue, 27 Aug 2024 15:06:34 +0200 Subject: [PATCH 10/14] fix: make fallback to window origin --- .gitignore | 1 + src/components/icon/resolveIcon.ts | 17 +++++++++++++---- src/components/icon/test/resolveIcon.spec.ts | 6 +++--- stencil.config.ts | 4 ++-- 4 files changed, 19 insertions(+), 9 deletions(-) diff --git a/.gitignore b/.gitignore index e965149..d9e4953 100755 --- a/.gitignore +++ b/.gitignore @@ -41,3 +41,4 @@ icons/ /playwright/.cache/ /svg /components +src/components/icon/svg/*.svg diff --git a/src/components/icon/resolveIcon.ts b/src/components/icon/resolveIcon.ts index a515d6a..ba4ece7 100644 --- a/src/components/icon/resolveIcon.ts +++ b/src/components/icon/resolveIcon.ts @@ -6,7 +6,7 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ -import { getAssetPath } from '@stencil/core'; +import { getAssetPath, setAssetPath } from '@stencil/core'; import { getCustomAssetUrl } from './meta-tag'; declare global { @@ -97,13 +97,22 @@ function isValidUrl(url: string) { return urlRegex.test(url); } -export function getAssetUrl(name: string) { +export function getIconUrl(name: string) { const customAssetUrl = getCustomAssetUrl(); if (customAssetUrl) { return `${customAssetUrl}/${name}.svg`; } - return getAssetPath(`svg/${name}.svg`); + let url: string = `svg/${name}.svg`; + try { + url = getAssetPath(url); + } catch (error) { + console.warn(error); + setAssetPath(`${window.location.origin}/`); + url = getAssetPath(url); + } + + return url; } export async function resolveIcon(iconName: string) { @@ -124,7 +133,7 @@ export async function resolveIcon(iconName: string) { } try { - return fetchSVG(getAssetUrl(iconName)); + return fetchSVG(getIconUrl(iconName)); } catch (error) { throw Error('Cannot resolve any icon'); } diff --git a/src/components/icon/test/resolveIcon.spec.ts b/src/components/icon/test/resolveIcon.spec.ts index a804b1f..9d22b29 100644 --- a/src/components/icon/test/resolveIcon.spec.ts +++ b/src/components/icon/test/resolveIcon.spec.ts @@ -2,7 +2,7 @@ * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED. */ import { iconStar } from '../icons'; -import { resolveIcon, getIconCacheMap, getAssetUrl, parseSVGDataContent } from '../resolveIcon'; +import { resolveIcon, getIconCacheMap, getIconUrl, parseSVGDataContent } from '../resolveIcon'; const exampleSvg = ` @@ -97,7 +97,7 @@ test('fill cache map if not loaded', async () => { const data = await resolveIcon('star'); expect(data).toBe(parseSVGDataContent(iconStar)); - expect(cacheMap.get(getAssetUrl('star'))).toBe(parseSVGDataContent(iconStar)); + expect(cacheMap.get(getIconUrl('star'))).toBe(parseSVGDataContent(iconStar)); }); test('preload custom icon', async () => { @@ -106,7 +106,7 @@ test('preload custom icon', async () => { const cacheMap = getIconCacheMap(); cacheMap.clear(); - cacheMap.set(getAssetUrl('star'), 'Test'); + cacheMap.set(getIconUrl('star'), 'Test'); const data = await resolveIcon('star'); expect(data).toBe('Test'); diff --git a/stencil.config.ts b/stencil.config.ts index 31cbcc3..8d55433 100644 --- a/stencil.config.ts +++ b/stencil.config.ts @@ -14,8 +14,8 @@ export const config: Config = { esmLoaderPath: '../loader', copy: [ { - src: path.join(__dirname, 'build-dist'), - dest: path.join(__dirname, 'dist'), + src: path.join(__dirname, 'svg'), + dest: path.join(__dirname, 'dist', 'ix-icons', 'svg'), }, ], }, From 92e2e3746a28db3461d80d967b8999062d325167 Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Tue, 27 Aug 2024 15:55:10 +0200 Subject: [PATCH 11/14] fix: types --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 96292a2..0058029 100644 --- a/package.json +++ b/package.json @@ -21,9 +21,10 @@ "es2015": "dist/esm/index.mjs", "es2017": "dist/esm/index.mjs", "jsnext:main": "dist/esm/index.js", - "types": "dist/types/interfaces.d.ts", + "types": "dist/types/index.d.ts", "collection": "dist/collection/collection-manifest.json", "collection:main": "dist/collection/index.js", + "unpkg": "dist/ix-icons/ix-icons.esm.js", "files": [ "components/", "dist/", From c7025876f822e31ba76f7054256eec3f763a9985 Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Wed, 28 Aug 2024 09:53:10 +0200 Subject: [PATCH 12/14] update to latest stencil version --- package.json | 2 +- pnpm-lock.yaml | 47 +++++++++++++++++++++++++---------------------- 2 files changed, 26 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index 0058029..81c91ee 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "ci:publish": "pnpm changeset publish" }, "dependencies": { - "@stencil/core": "^4.12.6" + "@stencil/core": "^4.21.0" }, "devDependencies": { "@changesets/changelog-github": "^0.5.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9b31b4a..35f966f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,8 +9,8 @@ importers: .: dependencies: '@stencil/core': - specifier: ^4.12.6 - version: 4.16.0 + specifier: ^4.21.0 + version: 4.21.0 devDependencies: '@changesets/changelog-github': specifier: ^0.5.0 @@ -23,7 +23,7 @@ importers: version: 1.43.1 '@stencil/sass': specifier: ^3.0.10 - version: 3.0.11(@stencil/core@4.16.0) + version: 3.0.11(@stencil/core@4.21.0) '@types/fs-extra': specifier: ^9.0.13 version: 9.0.13 @@ -50,10 +50,10 @@ importers: version: 14.1.1 jest: specifier: ^27.5.1 - version: 27.5.1(ts-node@10.9.2) + version: 27.5.1(ts-node@10.9.2(@types/node@16.18.96)(typescript@4.9.5)) jest-cli: specifier: ^27.5.1 - version: 27.5.1(ts-node@10.9.2) + version: 27.5.1(ts-node@10.9.2(@types/node@16.18.96)(typescript@4.9.5)) lodash: specifier: ^4.17.2 version: 4.17.21 @@ -436,8 +436,8 @@ packages: '@sinonjs/fake-timers@8.1.0': resolution: {integrity: sha512-OAPJUAtgeINhh/TAlUID4QTs53Njm7xzddaVlEs/SXwgtiD1tW22zAB/W1wdqfrpmikgaWQ9Fw6Ws+hsiRm5Vg==} - '@stencil/core@4.16.0': - resolution: {integrity: sha512-gXaC5IrquV/Hw5JIZTCWkM5lJEbBQtnvHLhDebjar6A6+YBqxah04dardS+YUNVuRbnE6Hcja7KKiAXT3oVsvw==} + '@stencil/core@4.21.0': + resolution: {integrity: sha512-v50lnVbzS8mpMSnEVxR+G75XpvxHKtkJaQrNPE8+/fF6Ppr5z4bcdcBhcP8LPfEW+4BZcic6VifMXRwTopc+kw==} engines: {node: '>=16.0.0', npm: '>=7.10.0'} hasBin: true @@ -4114,7 +4114,7 @@ snapshots: jest-util: 27.5.1 slash: 3.0.0 - '@jest/core@27.5.1(ts-node@10.9.2)': + '@jest/core@27.5.1(ts-node@10.9.2(@types/node@16.18.96)(typescript@4.9.5))': dependencies: '@jest/console': 27.5.1 '@jest/reporters': 27.5.1 @@ -4128,7 +4128,7 @@ snapshots: exit: 0.1.2 graceful-fs: 4.2.11 jest-changed-files: 27.5.1 - jest-config: 27.5.1(ts-node@10.9.2) + jest-config: 27.5.1(ts-node@10.9.2(@types/node@16.18.96)(typescript@4.9.5)) jest-haste-map: 27.5.1 jest-message-util: 27.5.1 jest-regex-util: 27.5.1 @@ -4318,9 +4318,10 @@ snapshots: progress: 2.0.3 proxy-from-env: 1.1.0 tar-fs: 2.1.1 - typescript: 4.9.5 unbzip2-stream: 1.4.3 yargs: 17.7.1 + optionalDependencies: + typescript: 4.9.5 transitivePeerDependencies: - supports-color @@ -4332,11 +4333,11 @@ snapshots: dependencies: '@sinonjs/commons': 1.8.6 - '@stencil/core@4.16.0': {} + '@stencil/core@4.21.0': {} - '@stencil/sass@3.0.11(@stencil/core@4.16.0)': + '@stencil/sass@3.0.11(@stencil/core@4.21.0)': dependencies: - '@stencil/core': 4.16.0 + '@stencil/core': 4.21.0 '@tootallnate/once@1.1.2': {} @@ -6183,16 +6184,16 @@ snapshots: transitivePeerDependencies: - supports-color - jest-cli@27.5.1(ts-node@10.9.2): + jest-cli@27.5.1(ts-node@10.9.2(@types/node@16.18.96)(typescript@4.9.5)): dependencies: - '@jest/core': 27.5.1(ts-node@10.9.2) + '@jest/core': 27.5.1(ts-node@10.9.2(@types/node@16.18.96)(typescript@4.9.5)) '@jest/test-result': 27.5.1 '@jest/types': 27.5.1 chalk: 4.1.2 exit: 0.1.2 graceful-fs: 4.2.11 import-local: 3.1.0 - jest-config: 27.5.1(ts-node@10.9.2) + jest-config: 27.5.1(ts-node@10.9.2(@types/node@16.18.96)(typescript@4.9.5)) jest-util: 27.5.1 jest-validate: 27.5.1 prompts: 2.4.2 @@ -6204,7 +6205,7 @@ snapshots: - ts-node - utf-8-validate - jest-config@27.5.1(ts-node@10.9.2): + jest-config@27.5.1(ts-node@10.9.2(@types/node@16.18.96)(typescript@4.9.5)): dependencies: '@babel/core': 7.24.4 '@jest/test-sequencer': 27.5.1 @@ -6230,6 +6231,7 @@ snapshots: pretty-format: 27.5.1 slash: 3.0.0 strip-json-comments: 3.1.1 + optionalDependencies: ts-node: 10.9.2(@types/node@16.18.96)(typescript@4.9.5) transitivePeerDependencies: - bufferutil @@ -6351,7 +6353,7 @@ snapshots: '@types/node': 16.18.96 jest-pnp-resolver@1.2.3(jest-resolve@27.5.1): - dependencies: + optionalDependencies: jest-resolve: 27.5.1 jest-regex-util@27.5.1: {} @@ -6499,11 +6501,11 @@ snapshots: merge-stream: 2.0.0 supports-color: 8.1.1 - jest@27.5.1(ts-node@10.9.2): + jest@27.5.1(ts-node@10.9.2(@types/node@16.18.96)(typescript@4.9.5)): dependencies: - '@jest/core': 27.5.1(ts-node@10.9.2) + '@jest/core': 27.5.1(ts-node@10.9.2(@types/node@16.18.96)(typescript@4.9.5)) import-local: 3.1.0 - jest-cli: 27.5.1(ts-node@10.9.2) + jest-cli: 27.5.1(ts-node@10.9.2(@types/node@16.18.96)(typescript@4.9.5)) transitivePeerDependencies: - bufferutil - canvas @@ -7136,9 +7138,10 @@ snapshots: https-proxy-agent: 5.0.1 proxy-from-env: 1.1.0 tar-fs: 2.1.1 - typescript: 4.9.5 unbzip2-stream: 1.4.3 ws: 8.13.0 + optionalDependencies: + typescript: 4.9.5 transitivePeerDependencies: - bufferutil - encoding From 04a819a936ad9d28f33a03e229b3fa797011bf32 Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Tue, 10 Sep 2024 16:30:50 +0200 Subject: [PATCH 13/14] test: fix build env for e2e test --- .gitignore | 1 + e2e/all-icon.e2e.ts | 2 +- scripts/build-icons.ts | 25 +------------------------ 3 files changed, 3 insertions(+), 25 deletions(-) diff --git a/.gitignore b/.gitignore index d9e4953..bac4c9a 100755 --- a/.gitignore +++ b/.gitignore @@ -41,4 +41,5 @@ icons/ /playwright/.cache/ /svg /components +/e2e/sample.json src/components/icon/svg/*.svg diff --git a/e2e/all-icon.e2e.ts b/e2e/all-icon.e2e.ts index 3d47047..0b55e87 100644 --- a/e2e/all-icon.e2e.ts +++ b/e2e/all-icon.e2e.ts @@ -8,7 +8,7 @@ */ import { ConsoleMessage, expect, test } from '@playwright/test'; -import * as iconsFile from './../dist/sample.json'; +import * as iconsFile from './sample.json'; import * as icons from './../icons'; function convertToCamelCase(value: string) { diff --git a/scripts/build-icons.ts b/scripts/build-icons.ts index e391849..f4fd5ae 100644 --- a/scripts/build-icons.ts +++ b/scripts/build-icons.ts @@ -175,8 +175,7 @@ async function buildIcons() { version, ), - writeIconSampleJson(iconCollection, path.join(rootPath, 'build-dist'), version), - writeGlobalCSSFile(path.join(rootPath, 'build-dist', 'css', 'ix-icons.css')), + writeIconSampleJson(iconCollection, path.join(rootPath, 'e2e'), version), fs.writeFile( iconsPkgPath, JSON.stringify( @@ -250,26 +249,4 @@ function getDataUrl(svgData: string) { return `"data:image/svg+xml;utf8,${svg}"`; } -async function writeGlobalCSSFile(targetPath: string) { - // Write the global css file to keep the application compiling after update to 2.0.0 - fs.ensureDirSync(path.join(targetPath, '..')); - - return fs.writeFile( - targetPath, - ` -/* -* SPDX-FileCopyrightText: 2023 Siemens AG -* -* SPDX-License-Identifier: MIT -* -* This source code is licensed under the MIT license found in the -* LICENSE file in the root directory of this source tree. -*/ -/* -* Deprecated since 2.0.0 no global css file is necessary. -*/ - `, - ); -} - buildIcons(); From acd51ebe1bb897090588a763567c56004546453d Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Mon, 23 Sep 2024 09:10:24 +0200 Subject: [PATCH 14/14] docs: adapt review comments --- BREAKING_CHANGES.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md index e657d76..e53985d 100644 --- a/BREAKING_CHANGES.md +++ b/BREAKING_CHANGES.md @@ -2,11 +2,10 @@ ## Loading icon svg as external resource -Previously all icons were bundled inside the icon package itself. We choose this way to provide a easy setup without any additional configurations. -The downside of this implementation results in a increasing bundle size. +Previously, all icons were included within the icon package itself. This approach was chosen to simplify setup and eliminate the need for additional configurations. However, this implementation has led to an increase in bundle size. -With release of main library @siemens/ix and @siemens/ix-icons you have to provide the icons as a static resource. This makes the bundle size significant smaller. +With the release of the main libraries @siemens/ix and @siemens/ix-icons, you now need to provide the icons as a static resource. This significantly reduces the bundle size. # v2.0.0 -Icon web fonts are removed. \ No newline at end of file +Icon web fonts are removed.