feat: reduce bundle size in combination with icons (#1238)

Co-authored-by: Lukas Maurer <[email protected]>
siemens · Jul 29, 2024 · 8803f31 · 8803f31
1 parent b5e2da1
commit 8803f31
Show file tree

Hide file tree

Showing 72 changed files with 593 additions and 311 deletions.
diff --git a/.changeset/gentle-snails-destroy.md b/.changeset/gentle-snails-destroy.md
@@ -0,0 +1,10 @@
+---
+'@siemens/ix-angular': major
+'@siemens/ix-aggrid': major
+'@siemens/ix-react': major
+'@siemens/ix': major
+'@siemens/ix-vue': major
+'@siemens/ix-echarts': major
+---
+
+feat: reduce bundle size in combination with icons
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - 'main'
+      - 'v3'
       - 'release/*'
   workflow_dispatch:
 

diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md
@@ -1,5 +1,50 @@
 # Breaking Changes
 
+## v3.0.0
+
+### Remove package `@siemens/ix-icons` from library
+
+TODO: Rewrite this section to explain what is the impact of this change.
+
+- **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)
+- **Angular** (`@siemens/ix-angular`): no changes
+- **React** (`@siemens/ix-react`): no changes
+- **Vue** (`@siemens/ix-vue`): no changes
+
+#### Usage of icons inside  `@siemens/ix-react` and  `@siemens/ix-vue` changed
+
+TODO: Rewrite this section to be more precise about what has to be adapted
+
+- Icon imports by name (e.g. `<IxIcon name="star" />`) are not supported any more. This will reduce bundle size and enable chunk loading.
+- It is still possible to use imports by name if the SVGs are provided as assets (see [Angular installation section](url)):
+
+```tsx
+import { iconStar } from '@siemens/ix-icons/icons';
+```
+
+React/Vue:
+```tsx
+<IxIcon name={iconStar} />
+```
+
+#### Installation instruction of `@siemens/ix-angular` changed
+
+TODO: Rewrite this section to be more precise about what has to be adapted
+
+- To use imports by name (e.g. `<ix-icon name="star"></ix-icon>`) an additional configuration entry is required inside of `angular.json`:
+
+```json
+"assets": [
+  "src/favicon.ico",
+  "src/assets",
+  {
+  "glob": "**/*.svg",
+  "input": "node_modules/@siemens/ix-icons/svg",
+  "output": "./svg"
+  }
+],
+```
+
 ## v2.0.0
 
 ### `input[class="form-control"]` and `textarea[class="form-control"]` are deprecated

diff --git a/packages/aggrid/gulpfile.ts b/packages/aggrid/gulpfile.ts
@@ -15,7 +15,7 @@ import path from 'path';
 import { rimraf } from 'rimraf';
 import dartSass from 'sass';
 
-const e2eTestFiles = [require.resolve('@siemens/ix/dist/siemens-ix/siemens-ix.css'), require.resolve('@siemens/ix-icons/dist/css/ix-icons.css')];
+const e2eTestFiles = [require.resolve('@siemens/ix/dist/siemens-ix/siemens-ix.css')];
 
 const sass = gulpSass(dartSass);
 

diff --git a/packages/aggrid/package.json b/packages/aggrid/package.json
@@ -22,7 +22,7 @@
   "devDependencies": {
     "@playwright/test": "^1.32.1",
     "@siemens/ix": "workspace:*",
-    "@siemens/ix-icons": "^2.0.0",
+    "@siemens/ix-icons": "v3-preview",
     "@types/gulp": "^4.0.14",
     "@types/gulp-postcss": "^8.0.4",
     "@types/gulp-sass": "^5.0.2",

diff --git a/packages/angular-test-app/angular.json b/packages/angular-test-app/angular.json
@@ -46,7 +46,15 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              {
+              "glob": "**/*.svg",
+              "input": "node_modules/@siemens/ix-icons/dist/svg",
+              "output": "./svg"
+             }
+            ],
             "styles": ["src/styles.scss"],
             "scripts": []
           },

diff --git a/packages/angular-test-app/package.json b/packages/angular-test-app/package.json
@@ -19,7 +19,7 @@
     "@angular/platform-browser": "^14.2.0",
     "@angular/platform-browser-dynamic": "^14.2.0",
     "@angular/router": "^14.2.0",
-    "@siemens/ix-icons": "^2.0.0",
+    "@siemens/ix-icons": "v3-preview",
     "@siemens/ix": "workspace:*",
     "@siemens/ix-angular": "workspace:*",
     "@siemens/ix-aggrid": "workspace:*",

diff --git a/packages/angular/package.json b/packages/angular/package.json
@@ -21,7 +21,7 @@
   "peerDependencies": {
     "@angular/core": ">=13.4.0",
     "@angular/forms": ">=13.4.0",
-    "@siemens/ix-icons": "^2.0.0"
+    "@siemens/ix-icons": "v3-preview"
   },
   "devDependencies": {
     "@angular/common": "v13-lts",

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -2190,13 +2190,12 @@
           "reflectToAttr": false,
           "docs": "The icon next to the actual text input\nDefaults to 'search'",
           "docsTags": [],
-          "default": "'search'",
           "values": [
             {
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -6511,13 +6510,12 @@
           "reflectToAttr": false,
           "docs": "Search icon",
           "docsTags": [],
-          "default": "'search'",
           "values": [
             {
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -12485,7 +12483,7 @@
           "name": "icon",
           "type": "string",
           "complexType": {
-            "original": "string | undefined",
+            "original": "string",
             "resolved": "string",
             "references": {}
           },
@@ -12499,7 +12497,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -12691,7 +12689,7 @@
           "name": "icon",
           "type": "string",
           "complexType": {
-            "original": "string | undefined",
+            "original": "string",
             "resolved": "string",
             "references": {}
           },
@@ -12700,13 +12698,12 @@
           "reflectToAttr": false,
           "docs": "Card icon",
           "docsTags": [],
-          "default": "undefined",
           "values": [
             {
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -13966,13 +13963,12 @@
           "reflectToAttr": false,
           "docs": "Button icon",
           "docsTags": [],
-          "default": "''",
           "values": [
             {
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -13993,7 +13989,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -14088,13 +14084,12 @@
           "reflectToAttr": false,
           "docs": "Icon of the button on the right",
           "docsTags": [],
-          "default": "'context-menu'",
           "values": [
             {
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -38,7 +38,7 @@
     "test:spec": "stencil test --spec",
     "test:ct": "playwright test --config playwright-ct.config.ts --reporter list",
     "visual-regression": "playwright test",
-    "host-root": "http-server ./ -a 127.0.0.1 -p 8080 -c-1",
+    "host-root": "http-server -a 127.0.0.1 -p 8080 -c-1",
     "generate": "stencil generate",
     "pkg": "pnpm pack"
   },
@@ -52,7 +52,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.32.1",
-    "@siemens/ix-icons": "^2.0.0",
+    "@siemens/ix-icons": "v3-preview",
     "@stencil-community/eslint-plugin": "^0.7.1",
     "@stencil-community/postcss": "^2.2.0",
     "@stencil/angular-output-target": "^0.8.3",
@@ -90,7 +90,7 @@
   },
   "peerDependencies": {
     "@popperjs/core": "^2.11.0",
-    "@siemens/ix-icons": "^2.0.0",
+    "@siemens/ix-icons": "v3-preview",
     "bootstrap": "~5.2.0"
   },
   "config": {

diff --git a/packages/core/playwright-ct.config.ts b/packages/core/playwright-ct.config.ts
@@ -28,6 +28,10 @@ const config: PlaywrightTestConfig = {
       },
     },
   ],
+  webServer: {
+    command: 'pnpm run host-root',
+    port: 8080,
+  },
   retries: 2,
 };
 

diff --git a/packages/core/scripts/e2e/load-e2e-runtime.js b/packages/core/scripts/e2e/load-e2e-runtime.js
@@ -54,12 +54,18 @@ function loadResources() {
     'http://127.0.0.1:8080/www/build/ix-brand-theme/ix-brand-theme.js'
   );
 
-  var ixIcons = document.createElement('link');
-  ixIcons.setAttribute('rel', 'stylesheet');
-  ixIcons.setAttribute(
-    'href',
-    'http://127.0.0.1:8080/www/build/ix-icons/css/ix-icons.css'
-  );
+  var ixIcons = document.createElement('script');
+  ixIcons.setAttribute('type', 'module');
+  ixIcons.innerHTML =
+    'import { defineCustomElements } from "/www/build/ix-icons/loader/index.es2017.js"; defineCustomElements();';
+
+  //     <meta name="ix-icons:path" content="/build/svg" />
+
+  var asset = document.createElement('meta');
+  asset.setAttribute('name', 'ix-icons:path');
+  asset.setAttribute('content', '/www/svg');
+
+  document.getElementsByTagName('head')[0].appendChild(asset);
 
   document.getElementsByTagName('head')[0].appendChild(bootstrapStyling);
   document.getElementsByTagName('head')[0].appendChild(ixEsm);
@@ -72,7 +78,6 @@ function loadResources() {
 }
 
 function detectThemeSwitching() {
-  console.log(location.search);
   var searchParams = new URLSearchParams(location.search);
   if (searchParams.has('theme')) {
     var theme = searchParams.get('theme');

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -384,7 +384,7 @@ export namespace Components {
         /**
           * The icon next to the actual text input Defaults to 'search'
          */
-        "icon": string;
+        "icon"?: string;
         /**
           * i18n
          */
@@ -1001,7 +1001,7 @@ export namespace Components {
         /**
           * Search icon
          */
-        "icon": string;
+        "icon"?: string;
         /**
           * Placeholder text
          */
@@ -1790,7 +1790,7 @@ export namespace Components {
         /**
           * Show icon
          */
-        "icon": string | undefined;
+        "icon"?: string;
         /**
           * Show pill as outline
          */
@@ -1829,7 +1829,7 @@ export namespace Components {
         /**
           * Card icon
          */
-        "icon": string | undefined;
+        "icon"?: string;
         /**
           * Card KPI value
          */
@@ -1993,11 +1993,11 @@ export namespace Components {
         /**
           * Button icon
          */
-        "icon": string;
+        "icon"?: string;
         /**
           * Button label
          */
-        "label": string;
+        "label"?: string;
         /**
           * Button outline variant
          */
@@ -2009,7 +2009,7 @@ export namespace Components {
         /**
           * Icon of the button on the right
          */
-        "splitIcon": string;
+        "splitIcon"?: string;
         /**
           * Color variant of button
          */
@@ -5971,7 +5971,7 @@ declare namespace LocalJSX {
         /**
           * Show icon
          */
-        "icon"?: string | undefined;
+        "icon"?: string;
         /**
           * Show pill as outline
          */
@@ -6010,7 +6010,7 @@ declare namespace LocalJSX {
         /**
           * Card icon
          */
-        "icon"?: string | undefined;
+        "icon"?: string;
         /**
           * Card KPI value
          */