test(tree-shaking): bundle test project setup (#13418)

Co-authored-by: Damyan Petev <[email protected]>

.github/workflows/nodejs.yml

@@ -52,6 +52,8 @@ jobs:
         run: |
             npm run build:i18n
             npm run test:i18n:dist
+      - name: Bundle Tree-Shake Test
+        run: npm run build:bundletest
       - name: Publish to coveralls.io
         if: github.repository == 'IgniteUI/igniteui-angular' && matrix.node-version == '16.x'
         uses: coverallsapp/[email protected]

angular.json

@@ -281,6 +281,100 @@
           }
         }
       }
+    },
+    "bundle-test": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "projects/bundle-test",
+      "sourceRoot": "projects/bundle-test/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/bundle-test",
+            "index": "projects/bundle-test/src/index.html",
+            "main": "projects/bundle-test/src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "projects/bundle-test/tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "styles": [
+              "projects/bundle-test/src/styles.scss"
+            ],
+            "scripts": [],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "node_modules"
+              ]
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "bundle-test:build:production"
+            },
+            "development": {
+              "browserTarget": "bundle-test:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "bundle-test:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "projects/bundle-test/tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "styles": [
+              "projects/bundle-test/src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
     }
   },
   "cli": {

package.json

@@ -44,7 +44,8 @@
     "build:sassdoc:en:staging": "set NODE_ENV=staging && set SASSDOC_LANG=en && gulp sassdocBuildEN",
     "build:sassdoc:ja:production": "set NODE_ENV=production && set SASSDOC_LANG=jp && gulp sassdocBuildJA --render true",
     "build:sassdoc:ja:staging": "set NODE_ENV=staging && set SASSDOC_LANG=jp && gulp sassdocBuildJA --render true",
-    "build:i18n": "tsc --project projects/igniteui-angular-i18n/tsconfig.build.json",
+    "build:i18n": "tsc --project projects/igniteui-angular-i18n/tsconfig.build.json && cp projects/igniteui-angular-i18n/package.json dist/igniteui-angular-i18n/package.json",
+    "build:bundletest": "ng build bundle-test --configuration production",
     "lint:i18n": "eslint projects/igniteui-angular-i18n/src/**/*.ts",
     "test:i18n:dist": "eslint -c projects/igniteui-angular-i18n/.eslintrc.dist.i18n.json dist/igniteui-angular-i18n/**/*.d.ts --no-eslintrc",
     "postinstall": "gulp copyGitHooks",

projects/bundle-test/src/app/app.component.html

@@ -0,0 +1,5 @@
+<!-- Toolbar -->
+<div role="banner">
+  <igx-chip [resourceStrings]="chipStrings">Chip</igx-chip>
+</div>
+

projects/bundle-test/src/app/app.component.spec.ts

@@ -0,0 +1,14 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => TestBed.configureTestingModule({
+    declarations: [AppComponent]
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+});

projects/bundle-test/src/app/app.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { ChipResourceStringsBG } from 'igniteui-angular-i18n';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  protected chipStrings = ChipResourceStringsBG;
+}

projects/bundle-test/src/app/app.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { IgxChipsModule } from 'igniteui-angular';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IgxChipsModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

projects/bundle-test/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>BundleTest</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body class="ig-typography">
+  <app-root></app-root>
+</body>
+</html>

projects/bundle-test/src/main.ts

@@ -0,0 +1,7 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

projects/bundle-test/src/polyfills.ts

@@ -0,0 +1,54 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags.ts';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+import 'hammerjs';

projects/bundle-test/src/styles.scss

@@ -0,0 +1,26 @@
+/* You can add global styles to this file, and also import other style files */
+@use '../../igniteui-angular/src/lib/core/styles/themes' as *;
+
+$primary: #fff;
+$secondary: #FF0A3A;
+$gray: #ddd;
+$background: #192053;
+
+$app-palette: palette(
+  $primary: $primary,
+  $secondary: $secondary,
+  $surface: $background,
+  $gray: $gray
+);
+
+@include core();
+@include typography();
+
+$include: (
+  igx-chip
+);
+
+@include light-theme(
+  $palette: $app-palette,
+  $exclude: map-keys(map-remove($components, $include...),)
+);

projects/bundle-test/tsconfig.app.json

@@ -0,0 +1,23 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": [],
+    "paths": {
+        "igniteui-angular": [
+          "projects/igniteui-angular/src/public_api.ts"
+        ],
+        "igniteui-angular-i18n": [
+          "dist/igniteui-angular-i18n"
+        ]
+    }
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

projects/bundle-test/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

projects/igniteui-angular/src/public_api.ts

@@ -52,8 +52,8 @@ export * from './lib/data-operations/data-util';
 /**
  * Components
  */
-export * from './lib/action-strip/public_api';
 export * from './lib/accordion/public_api';
+export * from './lib/action-strip/public_api';
 export * from './lib/avatar/avatar.component';
 export * from './lib/badge/badge.component';
 export * from './lib/banner/public_api';
@@ -70,6 +70,7 @@ export * from './lib/dialog/public_api';
 export * from './lib/drop-down/public_api';
 export * from './lib/grids/public_api';
 export * from './lib/grids/grid/public_api';
+export * from './lib/grids/pivot-grid/public_api';
 export * from './lib/grids/tree-grid/public_api';
 export * from './lib/grids/hierarchical-grid/public_api';
 export * from './lib/icon/public_api';
@@ -94,7 +95,6 @@ export * from './lib/stepper/public_api';
 export * from './lib/date-range-picker/public_api';
 export * from './lib/date-common/public_api';
 export * from './lib/tree/public_api';
-export * from './lib/grids/pivot-grid/public_api';
 export * from './lib/query-builder/public_api';
 
 /**