Skip to content

Commit 8803f31

Browse files
daniellerouxnuke-ellington
danielleroux
and
nuke-ellington
authored
feat: reduce bundle size in combination with icons (#1238)
Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>
1 parent b5e2da1 commit 8803f31

File tree

72 files changed

+593
-311
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+593
-311
lines changed

‎.changeset/gentle-snails-destroy.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
'@siemens/ix-angular': major
3+
'@siemens/ix-aggrid': major
4+
'@siemens/ix-react': major
5+
'@siemens/ix': major
6+
'@siemens/ix-vue': major
7+
'@siemens/ix-echarts': major
8+
---
9+
10+
feat: reduce bundle size in combination with icons

‎.github/workflows/build.yml

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ on:
44
push:
55
branches:
66
- 'main'
7+
- 'v3'
78
- 'release/*'
89
workflow_dispatch:
910

‎BREAKING_CHANGES.md

+45
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,50 @@
11
# Breaking Changes
22

3+
## v3.0.0
4+
5+
### Remove package `@siemens/ix-icons` from library
6+
7+
TODO: Rewrite this section to explain what is the impact of this change.
8+
9+
- **Web Components** (`@siemens/ix`): The icons package (`@siemens/ix-icons`) has to be bootstrapped manually (TODO: see [ix-icons repo](https://github.com/siemens/ix-icons) for installation instruction or add this also to the icons documentation)
10+
- **Angular** (`@siemens/ix-angular`): no changes
11+
- **React** (`@siemens/ix-react`): no changes
12+
- **Vue** (`@siemens/ix-vue`): no changes
13+
14+
#### Usage of icons inside `@siemens/ix-react` and `@siemens/ix-vue` changed
15+
16+
TODO: Rewrite this section to be more precise about what has to be adapted
17+
18+
- Icon imports by name (e.g. `<IxIcon name="star" />`) are not supported any more. This will reduce bundle size and enable chunk loading.
19+
- It is still possible to use imports by name if the SVGs are provided as assets (see [Angular installation section](url)):
20+
21+
```tsx
22+
import { iconStar } from '@siemens/ix-icons/icons';
23+
```
24+
25+
React/Vue:
26+
```tsx
27+
<IxIcon name={iconStar} />
28+
```
29+
30+
#### Installation instruction of `@siemens/ix-angular` changed
31+
32+
TODO: Rewrite this section to be more precise about what has to be adapted
33+
34+
- To use imports by name (e.g. `<ix-icon name="star"></ix-icon>`) an additional configuration entry is required inside of `angular.json`:
35+
36+
```json
37+
"assets": [
38+
"src/favicon.ico",
39+
"src/assets",
40+
{
41+
"glob": "**/*.svg",
42+
"input": "node_modules/@siemens/ix-icons/svg",
43+
"output": "./svg"
44+
}
45+
],
46+
```
47+
348
## v2.0.0
449

550
### `input[class="form-control"]` and `textarea[class="form-control"]` are deprecated

‎packages/aggrid/gulpfile.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import path from 'path';
1515
import { rimraf } from 'rimraf';
1616
import dartSass from 'sass';
1717

18-
const e2eTestFiles = [require.resolve('@siemens/ix/dist/siemens-ix/siemens-ix.css'), require.resolve('@siemens/ix-icons/dist/css/ix-icons.css')];
18+
const e2eTestFiles = [require.resolve('@siemens/ix/dist/siemens-ix/siemens-ix.css')];
1919

2020
const sass = gulpSass(dartSass);
2121

‎packages/aggrid/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"devDependencies": {
2323
"@playwright/test": "^1.32.1",
2424
"@siemens/ix": "workspace:*",
25-
"@siemens/ix-icons": "^2.0.0",
25+
"@siemens/ix-icons": "v3-preview",
2626
"@types/gulp": "^4.0.14",
2727
"@types/gulp-postcss": "^8.0.4",
2828
"@types/gulp-sass": "^5.0.2",

‎packages/angular-test-app/angular.json

+9-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,15 @@
4646
"polyfills": "src/polyfills.ts",
4747
"tsConfig": "tsconfig.app.json",
4848
"inlineStyleLanguage": "scss",
49-
"assets": ["src/favicon.ico", "src/assets"],
49+
"assets": [
50+
"src/favicon.ico",
51+
"src/assets",
52+
{
53+
"glob": "**/*.svg",
54+
"input": "node_modules/@siemens/ix-icons/dist/svg",
55+
"output": "./svg"
56+
}
57+
],
5058
"styles": ["src/styles.scss"],
5159
"scripts": []
5260
},

‎packages/angular-test-app/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"@angular/platform-browser": "^14.2.0",
2020
"@angular/platform-browser-dynamic": "^14.2.0",
2121
"@angular/router": "^14.2.0",
22-
"@siemens/ix-icons": "^2.0.0",
22+
"@siemens/ix-icons": "v3-preview",
2323
"@siemens/ix": "workspace:*",
2424
"@siemens/ix-angular": "workspace:*",
2525
"@siemens/ix-aggrid": "workspace:*",

‎packages/angular/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"peerDependencies": {
2222
"@angular/core": ">=13.4.0",
2323
"@angular/forms": ">=13.4.0",
24-
"@siemens/ix-icons": "^2.0.0"
24+
"@siemens/ix-icons": "v3-preview"
2525
},
2626
"devDependencies": {
2727
"@angular/common": "v13-lts",

‎packages/core/component-doc.json

+9-14
Original file line numberDiff line numberDiff line change
@@ -2190,13 +2190,12 @@
21902190
"reflectToAttr": false,
21912191
"docs": "The icon next to the actual text input\nDefaults to 'search'",
21922192
"docsTags": [],
2193-
"default": "'search'",
21942193
"values": [
21952194
{
21962195
"type": "string"
21972196
}
21982197
],
2199-
"optional": false,
2198+
"optional": true,
22002199
"required": false
22012200
},
22022201
{
@@ -6511,13 +6510,12 @@
65116510
"reflectToAttr": false,
65126511
"docs": "Search icon",
65136512
"docsTags": [],
6514-
"default": "'search'",
65156513
"values": [
65166514
{
65176515
"type": "string"
65186516
}
65196517
],
6520-
"optional": false,
6518+
"optional": true,
65216519
"required": false
65226520
},
65236521
{
@@ -12485,7 +12483,7 @@
1248512483
"name": "icon",
1248612484
"type": "string",
1248712485
"complexType": {
12488-
"original": "string | undefined",
12486+
"original": "string",
1248912487
"resolved": "string",
1249012488
"references": {}
1249112489
},
@@ -12499,7 +12497,7 @@
1249912497
"type": "string"
1250012498
}
1250112499
],
12502-
"optional": false,
12500+
"optional": true,
1250312501
"required": false
1250412502
},
1250512503
{
@@ -12691,7 +12689,7 @@
1269112689
"name": "icon",
1269212690
"type": "string",
1269312691
"complexType": {
12694-
"original": "string | undefined",
12692+
"original": "string",
1269512693
"resolved": "string",
1269612694
"references": {}
1269712695
},
@@ -12700,13 +12698,12 @@
1270012698
"reflectToAttr": false,
1270112699
"docs": "Card icon",
1270212700
"docsTags": [],
12703-
"default": "undefined",
1270412701
"values": [
1270512702
{
1270612703
"type": "string"
1270712704
}
1270812705
],
12709-
"optional": false,
12706+
"optional": true,
1271012707
"required": false
1271112708
},
1271212709
{
@@ -13966,13 +13963,12 @@
1396613963
"reflectToAttr": false,
1396713964
"docs": "Button icon",
1396813965
"docsTags": [],
13969-
"default": "''",
1397013966
"values": [
1397113967
{
1397213968
"type": "string"
1397313969
}
1397413970
],
13975-
"optional": false,
13971+
"optional": true,
1397613972
"required": false
1397713973
},
1397813974
{
@@ -13993,7 +13989,7 @@
1399313989
"type": "string"
1399413990
}
1399513991
],
13996-
"optional": false,
13992+
"optional": true,
1399713993
"required": false
1399813994
},
1399913995
{
@@ -14088,13 +14084,12 @@
1408814084
"reflectToAttr": false,
1408914085
"docs": "Icon of the button on the right",
1409014086
"docsTags": [],
14091-
"default": "'context-menu'",
1409214087
"values": [
1409314088
{
1409414089
"type": "string"
1409514090
}
1409614091
],
14097-
"optional": false,
14092+
"optional": true,
1409814093
"required": false
1409914094
},
1410014095
{

‎packages/core/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
"test:spec": "stencil test --spec",
3939
"test:ct": "playwright test --config playwright-ct.config.ts --reporter list",
4040
"visual-regression": "playwright test",
41-
"host-root": "http-server ./ -a 127.0.0.1 -p 8080 -c-1",
41+
"host-root": "http-server -a 127.0.0.1 -p 8080 -c-1",
4242
"generate": "stencil generate",
4343
"pkg": "pnpm pack"
4444
},
@@ -52,7 +52,7 @@
5252
},
5353
"devDependencies": {
5454
"@playwright/test": "^1.32.1",
55-
"@siemens/ix-icons": "^2.0.0",
55+
"@siemens/ix-icons": "v3-preview",
5656
"@stencil-community/eslint-plugin": "^0.7.1",
5757
"@stencil-community/postcss": "^2.2.0",
5858
"@stencil/angular-output-target": "^0.8.3",
@@ -90,7 +90,7 @@
9090
},
9191
"peerDependencies": {
9292
"@popperjs/core": "^2.11.0",
93-
"@siemens/ix-icons": "^2.0.0",
93+
"@siemens/ix-icons": "v3-preview",
9494
"bootstrap": "~5.2.0"
9595
},
9696
"config": {

‎packages/core/playwright-ct.config.ts

+4
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@ const config: PlaywrightTestConfig = {
2828
},
2929
},
3030
],
31+
webServer: {
32+
command: 'pnpm run host-root',
33+
port: 8080,
34+
},
3135
retries: 2,
3236
};
3337

‎packages/core/scripts/e2e/load-e2e-runtime.js

+12-7
Original file line numberDiff line numberDiff line change
@@ -54,12 +54,18 @@ function loadResources() {
5454
'http://127.0.0.1:8080/www/build/ix-brand-theme/ix-brand-theme.js'
5555
);
5656

57-
var ixIcons = document.createElement('link');
58-
ixIcons.setAttribute('rel', 'stylesheet');
59-
ixIcons.setAttribute(
60-
'href',
61-
'http://127.0.0.1:8080/www/build/ix-icons/css/ix-icons.css'
62-
);
57+
var ixIcons = document.createElement('script');
58+
ixIcons.setAttribute('type', 'module');
59+
ixIcons.innerHTML =
60+
'import { defineCustomElements } from "/www/build/ix-icons/loader/index.es2017.js"; defineCustomElements();';
61+
62+
// <meta name="ix-icons:path" content="/build/svg" />
63+
64+
var asset = document.createElement('meta');
65+
asset.setAttribute('name', 'ix-icons:path');
66+
asset.setAttribute('content', '/www/svg');
67+
68+
document.getElementsByTagName('head')[0].appendChild(asset);
6369

6470
document.getElementsByTagName('head')[0].appendChild(bootstrapStyling);
6571
document.getElementsByTagName('head')[0].appendChild(ixEsm);
@@ -72,7 +78,6 @@ function loadResources() {
7278
}
7379

7480
function detectThemeSwitching() {
75-
console.log(location.search);
7681
var searchParams = new URLSearchParams(location.search);
7782
if (searchParams.has('theme')) {
7883
var theme = searchParams.get('theme');

‎packages/core/src/components.d.ts

+9-9
Original file line numberDiff line numberDiff line change
@@ -384,7 +384,7 @@ export namespace Components {
384384
/**
385385
* The icon next to the actual text input Defaults to 'search'
386386
*/
387-
"icon": string;
387+
"icon"?: string;
388388
/**
389389
* i18n
390390
*/
@@ -1001,7 +1001,7 @@ export namespace Components {
10011001
/**
10021002
* Search icon
10031003
*/
1004-
"icon": string;
1004+
"icon"?: string;
10051005
/**
10061006
* Placeholder text
10071007
*/
@@ -1790,7 +1790,7 @@ export namespace Components {
17901790
/**
17911791
* Show icon
17921792
*/
1793-
"icon": string | undefined;
1793+
"icon"?: string;
17941794
/**
17951795
* Show pill as outline
17961796
*/
@@ -1829,7 +1829,7 @@ export namespace Components {
18291829
/**
18301830
* Card icon
18311831
*/
1832-
"icon": string | undefined;
1832+
"icon"?: string;
18331833
/**
18341834
* Card KPI value
18351835
*/
@@ -1993,11 +1993,11 @@ export namespace Components {
19931993
/**
19941994
* Button icon
19951995
*/
1996-
"icon": string;
1996+
"icon"?: string;
19971997
/**
19981998
* Button label
19991999
*/
2000-
"label": string;
2000+
"label"?: string;
20012001
/**
20022002
* Button outline variant
20032003
*/
@@ -2009,7 +2009,7 @@ export namespace Components {
20092009
/**
20102010
* Icon of the button on the right
20112011
*/
2012-
"splitIcon": string;
2012+
"splitIcon"?: string;
20132013
/**
20142014
* Color variant of button
20152015
*/
@@ -5971,7 +5971,7 @@ declare namespace LocalJSX {
59715971
/**
59725972
* Show icon
59735973
*/
5974-
"icon"?: string | undefined;
5974+
"icon"?: string;
59755975
/**
59765976
* Show pill as outline
59775977
*/
@@ -6010,7 +6010,7 @@ declare namespace LocalJSX {
60106010
/**
60116011
* Card icon
60126012
*/
6013-
"icon"?: string | undefined;
6013+
"icon"?: string;
60146014
/**
60156015
* Card KPI value
60166016
*/

0 commit comments

Comments
 (0)