refactor(module:icon): switch dependency to support tree shake (NG-ZO…

…RRO#2266) * refactor(module:icon): switch dependency to support tree shake * fix(module:icon): fix integration * fix(module:icon): change assets path
hsuanxyz · Oct 16, 2018 · 648da35 · 648da35
1 parent 5b7eab2
commit 648da35
Show file tree

Hide file tree

Showing 13 changed files with 42 additions and 82 deletions.
diff --git a/angular.json b/angular.json
@@ -22,7 +22,7 @@
               "site/src/404.html",
               {
                 "glob": "**/*",
-                "input": "./node_modules/@ant-design/icons/inline-svg/",
+                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
                 "output": "/assets/"
               }
             ],

diff --git a/components/breadcrumb/demo/separator.ts b/components/breadcrumb/demo/separator.ts
@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { ArrowRightOutline } from '@ant-design/icons-angular/icons';
 
 @Component({
   selector: 'nz-demo-breadcrumb-separator',

diff --git a/components/icon/demo/basic.ts b/components/icon/demo/basic.ts
@@ -8,13 +8,14 @@ import { Component } from '@angular/core';
       <i nz-icon [type]="'setting'" [theme]="'fill'"></i>
       <i nz-icon [type]="'smile'" [theme]="'outline'"></i>
       <i nz-icon [type]="'sync'" [spin]="true"></i>
+      <!-- Loading with new API would spin automatically! -->
       <i nz-icon [type]="'loading'"></i>
       <br><br>
       <i class="anticon anticon-home"></i>
       <i class="anticon anticon-setting"></i>
       <i class="anticon anticon-smile"></i>
       <i class="anticon anticon-sync anticon-spin"></i>
-      <i class="anticon anticon-loading"></i>
+      <i class="anticon anticon-loading anticon-spin"></i>
     </div>
   `,
   styles: [ `

diff --git a/components/icon/doc/index.en-US.md b/components/icon/doc/index.en-US.md
@@ -65,32 +65,23 @@ All the icons will be rendered to `<svg>`, and styles and classes applied to `<i
 
 As for icons provided by Ant Design, there are two ways of importing them into your project.
 
-Static loading. By registering icons to `NzIconService` you load icons statically. The icons would be compiled into your bundles. You can register all of them or icons that will really get rendered, and do that in constructors or `AppInitService` (recommended).
+Static loading. By registering icons to `NzIconService` you load icons statically. The icons would be compiled into your bundles. Do it in constructors or `AppInitService` (recommended).
 
 ```ts
-import { IconDefinition } from '@ant-design/icons-angular';
-import * as AllIcons from '@ant-design/icons-angular/icons';
+import { ApartmentOutline } from '@ant-design/icons-angular/icons';
 import { NzIconService } from 'ng-zorro-antd';
 
-// import { ApartmentOutline } from '@ant-design/icons-angular/icons';
-
 export class AppComponent implements OnInit, AfterViewInit {
   constructor(private iconService: NzIconService) {
-    // Import all.
-    const antDesignIcons = AllIcons as {
-      [key: string]: IconDefinition;
-    };
-    this.iconService.addIcon(...Object.keys(antDesignIcons).map(
-      key => antDesignIcons[key])
-    );
-
     // Import what you need.
-    // this.iconService.addIcon(ApartmentOutline);
+    this.iconService.addIcon(ApartmentOutline);
   }
 }
 ```
 
-Static loading would increase your bundle's size so we strongly recommend you not to register all of the icons. You can track this [issue](https://github.com/ant-design/ant-design/issues/12011) of Ant Design for more details.
+Static loading would increase your bundle's size so we recommend use dynamic importing as much as you can. You can track this [issue](https://github.com/ant-design/ant-design/issues/12011) of Ant Design for more details.
+
+> Icons used by `NG-ZORRO` itself are imported statically to increase loading speed. However, icons demonstrated on the official website are loaded dynamically.
 
 Dynamic importing. This way would not increase your bundle's size. When NG-ZORRO detects that the icon you want to render hasn't been registered, it would fire a HTTP request to load it. All you have to do is to config your `angular.json` like this:
 
@@ -99,7 +90,7 @@ Dynamic importing. This way would not increase your bundle's size. When NG-ZORRO
   "assets": [
     {
       "glob": "**/*",
-      "input": "./node_modules/@ant-design/icons/inline-svg/",
+      "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
       "output": "/assets/"
     }
   ]

diff --git a/components/icon/doc/index.zh-CN.md b/components/icon/doc/index.zh-CN.md
@@ -66,32 +66,23 @@ NG-ZORRO 之前并没有图标组件，而是提供了基于字体文件的解
 
 对于 Ant Design 提供的图标，我们提供了两种方式来加载图标资源文件。
 
-静态加载，通过在 `NzIconService` 中注册图标来实现静态引入，引入后的文件会被打包到 `.js` 文件中。可以全量引入，也可以按需引入，在 constructor 里或者在 `AppInitService` 里（推荐），例如：
+静态加载，通过在 `NzIconService` 中注册图标来实现静态引入，引入后的文件会被打包到 `.js` 文件中。在 constructor 里或者在 `AppInitService` 里（推荐），例如：
 
 ```ts
-import { IconDefinition } from '@ant-design/icons-angular';
-import * as AllIcons from '@ant-design/icons-angular/icons';
+import { ApartmentOutline } from '@ant-design/icons-angular/icons';
 import { NzIconService } from 'ng-zorro-antd';
 
-// import { ApartmentOutline } from '@ant-design/icons-angular/icons';
-
 export class AppComponent implements OnInit, AfterViewInit {
   constructor(private iconService: NzIconService) {
-    // Import all.
-    const antDesignIcons = AllIcons as {
-      [key: string]: IconDefinition;
-    };
-    this.iconService.addIcon(...Object.keys(antDesignIcons).map(
-      key => antDesignIcons[key])
-    );
-
     // Import what you need.
-    // this.iconService.addIcon(ApartmentOutline);
+    this.iconService.addIcon(ApartmentOutline);
   }
 }
 ```
 
-静态引入会增加包体积，我们非常不建议使用全量引入的方式，具体请看 Ant Design 的 [issue](https://github.com/ant-design/ant-design/issues/12011)。
+静态引入会增加包体积，所以我们建议尽可能地使用动态加载，如果要静态加载，也仅仅加载你需要用到的 icon，具体请看 Ant Design 的 [issue](https://github.com/ant-design/ant-design/issues/12011)。
+
+> 为了加快渲染速度，`NG-ZORRO` 本身用到的 icon 是静态引入的。而官网的图标是动态引入的。
 
 动态加载，这是为了减少包体积而提供的方式。当 NG-ZORRO 检测用户想要渲染的图标还没有静态引入时，会发起 HTTP 请求动态引入。你只需要配置 `angular.json` 文件：
 
@@ -100,7 +91,7 @@ export class AppComponent implements OnInit, AfterViewInit {
   "assets": [
     {
       "glob": "**/*",
-      "input": "./node_modules/@ant-design/icons/inline-svg/",
+      "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
       "output": "/assets/"
     }
   ]

diff --git a/components/icon/nz-icon.directive.ts b/components/icon/nz-icon.directive.ts
@@ -9,7 +9,7 @@ import {
   OnInit,
   Renderer2
 } from '@angular/core';
-import { withSuffix, IconDirective } from '@ant-design/icons-angular';
+import { IconDirective } from '@ant-design/icons-angular';
 import { NzIconService } from './nz-icon.service';
 
 /**
@@ -35,17 +35,13 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
    * Should be removed in next major version.
    */
   private _classChangeHandler(className: string): void {
-    if (!className) {
-      return;
-    }
+    if (!className) { return; }
 
     const forceSpin = className.indexOf('anticon-spin') > -1;
     const classArr = className.split(/\s/);
     let anticonType = classArr.filter(cls => cls !== 'anticon' && cls !== 'anticon-spin' && cls.match(/^anticon\-\w/))[ 0 ];
 
-    if (!anticonType) {
-      return;
-    }
+    if (!anticonType) { return; }
 
     anticonType = anticonType.replace('anticon-', '');
     if (anticonType.includes('verticle')) {
@@ -65,19 +61,10 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
     if (!(anticonType.endsWith('-o') || anticonType.endsWith('-fill') || anticonType.endsWith('-twotone'))) {
       anticonType += '-o';
     }
-    if (anticonType.startsWith('loading') || forceSpin) {
-      this.spin = true;
-    } else {
-      this.spin = false;
-    }
 
     if (this.type !== anticonType) {
       this.type = anticonType;
-      this._changeIcon()
-        .then(svg => {
-          this._addExtraModifications(svg);
-        })
-        .catch(err => {
+      this._changeIcon().catch(err => {
           console.warn('[NG-ZORRO]', `You can find more about this error on http://ng.ant.design/components/icon/en\n`, err);
         });
     }

diff --git a/components/icon/nz-icon.spec.ts b/components/icon/nz-icon.spec.ts
@@ -15,13 +15,13 @@ describe('icon', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports     : [ CommonModule, NzIconModule ],
-      declarations: [ NzTestIconComponent, NzTestIconCustomComponent, NzTestIconIconfontComponent, NzTestIconOldApiComponent ]
+      declarations: [ NzTestIconExtensionsComponent, NzTestIconCustomComponent, NzTestIconIconfontComponent, NzTestIconOldApiComponent ]
     }).compileComponents();
   });
 
   describe('extensions', () => {
     beforeEach(() => {
-      fixture = TestBed.createComponent(NzTestIconComponent);
+      fixture = TestBed.createComponent(NzTestIconExtensionsComponent);
       testComponent = fixture.debugElement.componentInstance;
       icons = fixture.debugElement.queryAll(By.directive(NzIconDirective));
     });
@@ -77,7 +77,6 @@ describe('icon', () => {
 
     it('should support iconfont', async(() => {
       fixture.detectChanges();
-
       fixture.whenStable().then(() => {
         fixture.detectChanges();
         icons = fixture.debugElement.queryAll(By.directive(NzIconDirective));
@@ -104,24 +103,17 @@ describe('icon', () => {
       expect(icons[ 0 ].nativeElement.className).toContain('anticon');
       expect(icons[ 0 ].nativeElement.innerHTML).toContain('svg');
     });
-
-    it('should make loading spin', fakeAsync(() => {
-      fixture.detectChanges();
-      tick(1000);
-      fixture.detectChanges();
-      expect(icons[ 1 ].nativeElement.classList.contains('anticon-spin')).toBe(true);
-    }));
   });
 });
 
 @Component({
-  selector: 'nz-test-icon',
+  selector: 'nz-test-icon-extensions',
   template: `
     <i nz-icon [type]="type" [theme]="theme" [spin]="spin"></i>
     <i nz-icon [type]="'loading'" [theme]="theme"></i>
   `
 })
-export class NzTestIconComponent {
+export class NzTestIconExtensionsComponent {
   type = 'question';
   theme = 'outline';
   spin = true;
@@ -163,8 +155,10 @@ export class NzTestIconIconfontComponent {
 @Component({
   selector: 'nz-test-icon-old-api',
   template: `
-    <i nz-icon type="question"></i>
-    <i nz-icon type="loading"></i>
+    <i class="anticon anticon-question"></i>
+    <!-- Just to improve codecov. Compatibility code would be removed in 2.0.  -->
+    <i class="anticon anticon-verticle"></i>
+    <i class="anticon anticon-cross"></i>
   `
 })
 export class NzTestIconOldApiComponent {

diff --git a/components/icon/page/index.ts b/components/icon/page/index.ts
@@ -1,7 +1,8 @@
 import { DOCUMENT } from '@angular/common';
 import { Component, Inject, OnInit } from '@angular/core';
-
-const mani = require('@ant-design/icons/lib/manifest').default;
+import { manifest } from '@ant-design/icons-angular';
+import { AccountBookFill } from '@ant-design/icons-angular/icons';
+import { NzIconService } from 'ng-zorro-antd';
 
 const categories = {
   direction : [
@@ -249,7 +250,7 @@ export class NzPageDemoIconComponent implements OnInit {
     const names = Object.keys(categories)
     .map(category => ({
       name : category,
-      icons: categories[ category ].filter(name => mani[ value ].indexOf(name) > -1)
+      icons: categories[ category ].filter(name => manifest[ value ].indexOf(name) > -1)
     }))
     .filter(({ icons }) => Boolean(icons.length));
 
@@ -258,7 +259,9 @@ export class NzPageDemoIconComponent implements OnInit {
     this.currentTheme = value;
   }
 
-  constructor(@Inject(DOCUMENT) private dom: any) {
+  constructor(@Inject(DOCUMENT) private dom: any, private _iconService: NzIconService) {
+    // This is to test that tree shake works!
+    this._iconService.addIcon(AccountBookFill);
   }
 
   ngOnInit() {

diff --git a/components/ng-zorro-antd.module.ts b/components/ng-zorro-antd.module.ts
@@ -1,4 +1,5 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
+
 import { NzAffixModule } from './affix/nz-affix.module';
 import { NzAlertModule } from './alert/nz-alert.module';
 import { NzAnchorModule } from './anchor/nz-anchor.module';
@@ -32,7 +33,6 @@ import { NzMenuModule } from './menu/nz-menu.module';
 import { NzMessageModule } from './message/nz-message.module';
 import { NzModalModule } from './modal/nz-modal.module';
 import { NzNotificationModule } from './notification/nz-notification.module';
-import { NzTreeSelectModule } from './tree-select/nz-tree-select.module';
 import { NzPaginationModule } from './pagination/nz-pagination.module';
 import { NzPopconfirmModule } from './popconfirm/nz-popconfirm.module';
 import { NzPopoverModule } from './popover/nz-popover.module';
@@ -52,6 +52,7 @@ import { NzTimePickerModule } from './time-picker/nz-time-picker.module';
 import { NzTimelineModule } from './timeline/nz-timeline.module';
 import { NzToolTipModule } from './tooltip/nz-tooltip.module';
 import { NzTransferModule } from './transfer/nz-transfer.module';
+import { NzTreeSelectModule } from './tree-select/nz-tree-select.module';
 import { NzTreeModule } from './tree/nz-tree.module';
 import { NzUploadModule } from './upload/nz-upload.module';
 

diff --git a/components/package.json b/components/package.json
@@ -23,7 +23,7 @@
   "dependencies": {
     "date-fns": "^1.29.0",
     "@angular/cdk": "^6.0.0",
-    "@ant-design/icons-angular": "0.0.1-alpha.1"
+    "@ant-design/icons-angular": "^0.0.1"
   },
   "peerDependencies": {
     "@angular/animations": "^6.0.0",

diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@angular/cdk": "^6.0.0",
-    "@ant-design/icons-angular": "0.0.1-alpha.1",
+    "@ant-design/icons-angular": "^0.0.1",
     "date-fns": "^1.29.0"
   },
   "devDependencies": {
@@ -103,6 +103,7 @@
     "tslib": "^1.9.0",
     "tslint": "~5.11.0",
     "typescript": "~2.9.2",
+    "webpack-bundle-analyzer": "^3.0.2",
     "yaml-front-matter": "^3.4.0",
     "zone.js": "^0.8.26"
   },

diff --git a/schematics/fix-icon/index.ts b/schematics/fix-icon/index.ts
@@ -5,7 +5,7 @@ import { Schema } from './schema';
 
 const ICON_ASSET_CONFIG = {
   'glob'  : '**/*',
-  'input' : './node_modules/@ant-design/icons/inline-svg/',
+  'input' : './node_modules/@ant-design/icons-angular/src/inline-svg/',
   'output': '/assets/'
 };
 

diff --git a/scripts/site/_site/src/app/app.component.ts b/scripts/site/_site/src/app/app.component.ts
@@ -1,8 +1,6 @@
 import { AfterViewInit, Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { NavigationEnd, Router } from '@angular/router';
-import { IconDefinition } from '@ant-design/icons-angular';
-import * as AllIcons from '@ant-design/icons-angular/icons';
 import { en_US, zh_CN, NzI18nService, NzIconService, NzMessageService } from 'ng-zorro-antd';
 import { environment } from '../environments/environment';
 import { ROUTER_LIST } from './router';
@@ -45,12 +43,6 @@ export class AppComponent implements OnInit, AfterViewInit {
   }
 
   constructor(private router: Router, private title: Title, private nzI18nService: NzI18nService, private msg: NzMessageService, private iconService: NzIconService) {
-    const antDesignIcons = AllIcons as {
-      [key: string]: IconDefinition;
-    };
-    this.iconService.addIcon(...Object.keys(antDesignIcons).map(
-      key => antDesignIcons[key])
-    );
     this.iconService.twoToneColor = { primaryColor: '#1890ff' };
   }