feat(core): optimize bundle size (#611)

Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>

.gitignore

@@ -147,6 +147,7 @@ yarn-error.log*
 ###
 # Build output
 ##
+packages/core/components/
 packages/*/dist/
 packages/*/www/
 packages/*/loader/

packages/angular-test-app/package.json

@@ -18,7 +18,7 @@
     "@angular/platform-browser": "^14.2.0",
     "@angular/platform-browser-dynamic": "^14.2.0",
     "@angular/router": "^14.2.0",
-    "@siemens/ix-icons": "^1.2.0",
+    "@siemens/ix-icons": "2.0.0-beta.0",
     "@siemens/ix": "~2.0.0-beta.1",
     "@siemens/ix-aggrid": "~2.0.0-beta.1",
     "@siemens/ix-angular": "~2.0.0-beta.1",

packages/angular-test-app/src/styles.scss

@@ -14,7 +14,6 @@
 
 @import '@siemens/ix-aggrid/dist/ix-aggrid/ix-aggrid.css';
 @import '@siemens/ix/dist/siemens-ix/siemens-ix.css';
-@import '@siemens/ix-icons/dist/css/ix-icons.css';
 
 @import './preview-examples/placeholder-logo.css';
 

packages/angular/ng-package.json

@@ -5,5 +5,5 @@
   "lib": {
     "entryFile": "src/index.ts"
   },
-  "allowedNonPeerDependencies": ["tslib", "@siemens/ix", "@siemens/ix-icons"]
+  "allowedNonPeerDependencies": ["tslib", "@siemens/ix"]
 }

packages/angular/package.json

@@ -16,11 +16,11 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@siemens/ix": "~2.0.0-beta.1",
-    "@siemens/ix-icons": "^1.2.0"
+    "@siemens/ix": "~2.0.0-beta.1"
   },
   "peerDependencies": {
-    "@angular/core": ">=13.3.12"
+    "@angular/core": ">=13.3.12",
+    "@siemens/ix-icons": "2.0.0-beta.0"
   },
   "devDependencies": {
     "@angular/common": "v13-lts",

packages/angular/src/app-initialize.ts

@@ -7,12 +7,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { defineCustomElements as iconsDefineCustomElements } from '@siemens/ix-icons/loader';
 import { applyPolyfills, defineCustomElements } from '@siemens/ix/loader';
 
 let didInitialize = false;
 
 export const appInitialize = (doc: Document) => {
-  return () => {
+  return async () => {
     const win: Window | undefined = doc.defaultView as any;
     if (win && typeof (window as any) !== 'undefined') {
       if (didInitialize) {
@@ -21,9 +22,9 @@ export const appInitialize = (doc: Document) => {
 
       didInitialize = true;
 
-      applyPolyfills().then(() => {
-        return defineCustomElements();
-      });
+      await applyPolyfills();
+      await iconsDefineCustomElements();
+      await defineCustomElements();
     }
   };
 };

packages/angular/src/components.ts

@@ -985,28 +985,6 @@ export declare interface IxGroupItem extends Components.IxGroupItem {
 }
 
 
-@ProxyCmp({
-  inputs: ['color', 'name', 'size']
-})
-@Component({
-  selector: 'ix-icon',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'name', 'size'],
-})
-export class IxIcon {
-  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;
-  }
-}
-
-
-export declare interface IxIcon extends Components.IxIcon {}
-
-
 @ProxyCmp({
   inputs: ['color', 'disabled', 'ghost', 'icon', 'loading', 'outline', 'oval', 'size', 'type', 'variant']
 })

packages/angular/src/declare-components.ts

@@ -39,7 +39,6 @@ export const DIRECTIVES = [
   d.IxGroup,
   d.IxGroupContextMenu,
   d.IxGroupItem,
-  d.IxIcon,
   d.IxIconButton,
   d.IxIconToggleButton,
   d.IxInputGroup,

packages/angular/src/index.ts

@@ -11,6 +11,7 @@ export * from '@siemens/ix';
 export * from './boolean-value-accessor';
 export * from './components';
 export * from './dropdown/trigger.directive';
+export { IxIcon } from './ix-icon';
 export * from './modal';
 export * from './module';
 export * from './select-value-accessor';

packages/angular/src/ix-icon.ts

@@ -0,0 +1,38 @@
+/*
+ * 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.
+ */
+
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  NgZone,
+} from '@angular/core';
+import type { Components } from '@siemens/ix';
+import { ProxyCmp } from './angular-component-lib/utils';
+
+export declare interface IxIcon extends Components.IxIcon {}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['color', 'name'],
+})
+@Component({
+  selector: 'ix-icon',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['color', 'name'],
+})
+export class IxIcon {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}

packages/angular/src/module.ts

@@ -17,17 +17,18 @@ import {
 import { appInitialize } from './app-initialize';
 import { DIRECTIVES } from './declare-components';
 import { IxDropdownTriggerDirective } from './dropdown/trigger.directive';
+import { IxIcon } from './ix-icon';
 import { ModalService } from './modal';
 import { SelectValueAccessor } from './select-value-accessor';
 import { BooleanValueAccessor } from './boolean-value-accessor';
 import { ThemeService } from './theme';
 import { ToastService } from './toast';
 import * as tree from './tree';
-
 const DECLARATIONS = [
   ...DIRECTIVES,
   tree.IxTree,
   IxDropdownTriggerDirective,
+  IxIcon,
   SelectValueAccessor,
   BooleanValueAccessor
 ];